Question

我的问题是：
我的元素（position:fixed）与其他元素（页脚）重叠。

需要：
当主要内容的滚动完成时，我希望position:fixed元素保持在他的位置。像taht：

它是IHM（不带代码）

Answer 1

执行此操作的可能方法是使用position: sticky。它将使元素保持在顶部，直到达到.wrap的末尾。这是以下的实现：

＆＃13;

body {
  margin: 0;
  padding: 0;
}

footer {
  height: 200px;
  background: yellow;
  padding: 15px;
}

.wrap {
  box-sizing: border-box;
  height: 800px;
  position: relative;
  width: 100%;
  border: 1px solid red;
}

.aside {
  color: #ffffff;
  height: 50px;
  padding: 15px;
  position: sticky;
  top: 0;
  width: 100px;
  background: green;
}

＆＃13;

<div class="row">
  <div class="col-md-2 wrap">
    <div class="aside">aside</div>
  </div>
  <div class="col-md-8">

  </div>
  <div class="col-md-2">

  </div>
</div>
<footer>footer</footer>

＆＃13;

Answer 2

希望我理解你的问题。

转到Codepen

body {
  margin: 0;
  padding: 0;
}

.hardheight { 
  height:auto;
}

footer {
  height:200px;
  background:yellow;
}

.aside {
  color: #ffffff;
  height: 350px;
  padding: 15px;
  position: sticky;
  top: 0;
  width: 100px;
  background: green;
  padding: 5px;
  overflow: scroll;
}
.wrap {
  box-sizing: border-box;
  height: 800px;
  position: relative;
  width: 100%;
}




      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-2 wrap">
            <div class="aside">
              <p>Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
            </div>
           </div>
           <div class="col-sm-8 hardheight">
           <p>height content</p>
           <p>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur aliquet quam id dui posuere blandit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus.</p>
<p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam id dui posuere blandit. Donec rutrum congue leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
           </div>
           <div class="col-sm-2"><p>Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
           </div>  
        </div>
       </div>
        <footer>footer</footer>

元素位置固定有限

2 个答案: