>

위치가 고정되어 있고 변환 속성이 ​​없지만 "hero"div는 항상 페이지와 함께 이동합니다. 그대로두고 싶어요

.hero{
  position: fixed;
  width: 1500px;
  margin-left: 0px;
  margin-top: 60px;
}

<시간> 전체 CSS :

*
{
  margin: 0;
  padding: 0;
}
header
{
  background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),  url(img/snow.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.main-nav
{
  float: right;
  list-style: none;
  margin-top: 30px;

}
.main-nav li{
  display: inline-block;
}
.main-nav li a{
  color:white;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "Roboto", "sans-serif";
}
.main-nav li.active a{
  border: 1px solid white;
}
.main-nav li a:hover{
  border: 1px solid white;
}
.logo img
{
  width: 150px;
  height: auto;
  float: left;
}
body
{
  font-family: monospace;
}
.row
{
  max-width: 1200px;
  margin: auto;
}
.hero{
  position: fixed;
  width: 1500px;
  margin-left: 0px;
  margin-top: 60px;
}
h1{
  color: white;
  text-transform: uppercase;
  font-size: 60px;
  text-align: center;
  /* margin-top: 275px; */
  margin-top: 220;
}
.button
{
  margin-top: 30px;
  margin-left: 440px;
  position: sticky;
}
.btn{
  border: 1px solid white;
  padding: 10px 30px;
  color: white;
  text-decoration: none;
  margin-right: 5px;
  font-size: 13px;
  text-transform: uppercase;
  position: sticky;
}
.btn-one{
  background-color: darkorange;
  font-family: "Roboto", sans-serif;
  position: sticky;
}
.btn-two{
  font-family: "Roboto", sans-serif;
  position: sticky;
}
.btn-two:hover{
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,body{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-y: auto;
  overflow-x: hidden;
}
#page_2{
  height: 1000px;
  background-color: red;
  }

<시간>

전체 HTML :

<html>
<head>
<title>Summer Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

  <header>
    <div id="page_1">
<div id="particles-js">

  <div  class="row">
    <!-- <div class ="logo">
      <img src="https://i.imgur.com/0PyA8HR.png" alt="">
      </div> -->
    <ul class="main-nav">
      <li class ="active"> <a href="index.html">HOME</a> </li>
              <li> <a href="about.html">ABOUT</a> </li>
                <li> <a href="">PORTFOLIO</a> </li>
      </ul>
      </div>

        <div class="hero">
        <h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
        <div class="button">
          <a href="https://www.linkedin.com/in/kacie-ahmed-2a8b5b171/" class="btn btn-one"  target="_blank"> LINKEDIN </a>
          <a href="" class="btn btn-two"> RESUME </a>
</div>
<div class ="bro">
</div>
        </div>

</div>
  </header>

      <!--particles js file -->
<!-- <h1> TEST </h1> -->
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</div>
<div id=page_2>
</div>
</body>


</html>

<시간>
  • 답변 # 1

    닫는 태그가 잘못 중첩 된 데 문제가있는 것 같습니다. 닫기 헤더 태그 앞에 다른 닫기 div가 필요합니다. 이 스 니펫은 영웅을 고정 된 위치에 표시합니다.

    .hero {
      position: fixed;
      width: 1500px;
      margin-left: 0px;
      margin-top: 60px;
    }
    Full css: * {
      margin: 0;
      padding: 0;
    }
    header {
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
      height: 100vh;
      background-size: cover;
      background-position: center;
    }
    .main-nav {
      float: right;
      list-style: none;
      margin-top: 30px;
    }
    .main-nav li {
      display: inline-block;
    }
    .main-nav li a {
      color: white;
      text-decoration: none;
      padding: 5px 20px;
      font-family: "Roboto", "sans-serif";
    }
    .main-nav li.active a {
      border: 1px solid white;
    }
    .main-nav li a:hover {
      border: 1px solid white;
    }
    .logo img {
      width: 150px;
      height: auto;
      float: left;
    }
    body {
      font-family: monospace;
    }
    .row {
      max-width: 1200px;
      margin: auto;
    }
    .hero {
      position: fixed;
      width: 1500px;
      margin-left: 0px;
      margin-top: 60px;
    }
    h1 {
      color: white;
      text-transform: uppercase;
      font-size: 60px;
      text-align: center;
      /* margin-top: 275px; */
      margin-top: 220;
    }
    .button {
      margin-top: 30px;
      margin-left: 440px;
      position: sticky;
    }
    .btn {
      border: 1px solid white;
      padding: 10px 30px;
      color: white;
      text-decoration: none;
      margin-right: 5px;
      font-size: 13px;
      text-transform: uppercase;
      position: sticky;
    }
    .btn-one {
      background-color: darkorange;
      font-family: "Roboto", sans-serif;
      position: sticky;
    }
    .btn-two {
      font-family: "Roboto", sans-serif;
      position: sticky;
    }
    .btn-two:hover {
      background-color: darkorange;
      transition: all 0.5s ease-in;
    }
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    #page_2 {
      height: 1000px;
      background-color: red;
    }
    
    

    <header>
      <div id="page_1">
        <div id="particles-js">
    
          <div class="row">
            <!-- <div class ="logo">
          <img src="https://i.imgur.com/0PyA8HR.png" alt="">
          </div> -->
            <ul class="main-nav">
              <li class="active"> <a href="index.html">HOME</a> </li>
              <li> <a href="about.html">ABOUT</a> </li>
              <li> <a href="">PORTFOLIO</a> </li>
            </ul>
          </div>
    
          <div class="hero">
            <h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
            <div class="button">
              <a href="https://www.linkedin.com/in/kacie-ahmed-2a8b5b171/" class="btn btn-one" target="_blank"> LINKEDIN </a>
              <a href="" class="btn btn-two"> RESUME </a>
            </div>
            <div class="bro">
            </div>
          </div>
    
        </div>
      </div>
    </header>
    
    <div id=page_2>
    </div>
    
    

  • 답변 # 2

    위치 사용 : 상속

    고정을 사용하고 있는데 이것이 문제를 일으키는 것으로 생각됩니다.

    상속 이동, 절대 스택, 페이지가있는 고정 스크롤, 정적이 기본값입니다.

  • 이전 텍스트를 iOS 시뮬레이터에 복사하십시오
  • 다음 python - 메타 클래스를 사용하여 장고 모델을 동적으로 확장