Home>

I want to move the position:absolute;thing with a white background and move it like the position:fixed;state.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>

  
    
      
        
      <p>Bangkok Nomad Engineer Training Course</p>
      
      
      <P>Click here for inquiries/request for materials</P>
      
    
  
  
</body>
</html>

css

.header-back{
  height: 500px;
  background-color:gray;
}
.header-wrapper{
  width:100%;
}
.header{
  background-color: white;
  position:fixed;
  width:100%;
  padding: 13px 0;
  display: flex;
  justify-content:space-between;
  z-index: 100;
}
.header-logo{
  position: absolute;
  left: 0;
  display:flex;
  z-index: 10;
  background-color:white;
}
.header-logo img{
  width: 150px;
  height:40px;
  vertical-align: middle;
}
.header-logo p{
  display:block;
  margin:0;
  position:relative;
  }
  .contact{
  background-color:#D84940;
  border-radius: 30px;
  position: absolute;
  right: 20px;
  z-index: 10;
  text-decoration: none;
}
.contact a p{
  color:white;
  padding:7px 30px;
  margin:0;
 }
  • Answer # 1

    .headerI wondered if it was a question that I wanted to do something about the background color of not spreading.
    Please point out if it is different.


    .headerAll the contents of are absolutely arranged and are out of the contents, so the height is lost.
    Soposition:absoluteRemoving is the most obvious solution.

    .header-logo {
        /* position: absolute;*/
        position: relative;
        left: 0;
        display: flex;
        z-index: 10;
        background-color: white;
    }
    .contact {
        background-color: #D84940;
        border-radius: 30px;
        /* position: absolute;*/
        position: relative;
        right: 20px;
        z-index: 10;
        text-decoration: none;
    }

    If you absolutely want to place absolutely,.headerI have no choice but to give the height to

    .header{
        height: 40px;
    }

    However, this gives an absolute height, so the layout may break when the screen size changes.
    I think there is a way to solve it with JavaScript, but...

  • Answer # 2

    position: absolute;Isposition: relative;Did you know that it is a property that can be positioned within the element of?
    position: fixed;Is different from the intended use,It cannot be moved like the position:fixed;state.

    https://developer.mozilla.org/ja/docs/Web/CSS/position