Question

我试图让内部div固定相对于它的parrent div。我在jsfiddle上提供了我的代码示例。问题是滚动div时。它不再是它的立场。我的HTML看起来像：

 <div class="outer">
   <div class="inner1">
     Lorem ipsum dolor
   </div>
   <div class="inner2">

   </div>

</div>

和css

    .outer{
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid black;
  overflow: auto;
}

.inner1{
  position: absolute;
  width:50px;
  height: auto;
  border: 1px solid blue;
  top: 10px;
  right: 10px;
}
.inner2{
  width: 500px;
  height: 500px;
}

有没有办法只使用css使inner1相对于outer固定？

Answer 1

试试这个......

 <style>
.outer{
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid black;
  overflow: auto;
}

.inner1{
  position: fixed;
  width:50px;
  height: auto;
  border: 1px solid blue;

}
.inner2{
  width: 500px;
  height: 500px;
}
</style>

Answer 2

你可以试试这个：

.inner1 {
        position: fixed;
        width: 50px;
        height: auto;
        border: 1px solid blue;
        top: 10px;
        right: calc(100% - 400px); // 400px is the outer div's width
    }

Answer 3

这是有效的JSfiddle

<div class="container">
<div class="header">title</div>
<div class="cont_elements">
    <div class="element">......</div>
    <div class="element">......</div>
    <div class="element">......</div>
</div>

和css将是

.header {
    position: absolute;
    top:0;
    /* scrolling out of view :-( */
    z-index:2;
    background-color:pink;
}
.container {
    position:relative;
    width:200px;
    height:400px;
    background:gold;
}
.cont_elements {overflow-y:scroll; height:100%;}
.element {
    position: relative;
}

Answer 4

只需更改.inner1

.inner1{
    position: fixed;
    width:50px;
    height: auto;
    border: 1px solid blue;
    margin-top: 10px;
    left: 330px;
}

仅使用css使内部div固定

4 个答案: