Question

我有一个引导网站，我的div无法放入容器内，div与容器高度重叠。 Div有一个属性position: fixed是否仍然可以将其放入容器中？

代码：

.container{
    width: 92%;
    padding: 0;
    clear: both;
  }
  .row {
      margin-right: 50px;
      margin-left: 50px;
  }
  .row:before, .row:after{
    content: " ";
    display: table;
  }

  .container:before, .container:after{
    content: " ";
    display: table;
  }

  .row:after{
    clear: both;
  }

  .container:after {
      clear: both;
  }

  .col-md-3{
    background-color: #e2e2e2;
    position: fixed;
    left: 0;
    right: 0;
    width: 21%;
    padding: 0;
    top: 72px;
    border-radius: 5px;
    z-index: 1040;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row container">
    <div class="col-md-3">
        //More code
    </div>
</div>

Answer 1

而不是position:fixed，请尝试position:absolute并将position: relative应用于容器。现在，您可以相对于内容定位元素。

当您应用position:fixed时，它将根据body标记进行定位。

Answer 2

没有。 Position：fixed使元素相对于浏览器窗口固定。它完全忽略了它的容器位置。您可以尝试使用position：absolute。

Answer 3

它可能会有所帮助

.container {
    border:1px;
    border-style:solid;
    width:250px;
    background-color:white;
    height:250px;   
    padding: 5px;
}
.col-md-3 {
    position:relative;
    padding:5px;    
    height:100%;
    width:100%;
    border:1px;
    background-color:#ccffcc;
    border-style:solid;  
     box-sizing: border-box;
}

<div class="row container">
    <div class="col-md-3">
      <p>some code here</p>
    </div>
</div>

容器的高度不随内容而变化

3 个答案: