Question

如果它在这种情况下有所不同，我正在使用Twitter Bootstrap。我试图使用词缀，但这允许元素突破父级。

假设我在页面上有一个项目列表。每个项目的布局如下：

<h3>Item name</h3>
<div class = "row">
   <div class = "col-md-10">
      <figure>
         <img src = "/assets/img/image.jpg" class = "img-responsive" />
      </figure>
   </div>
   <div class = "col-md-2" style = "text-align: center">
      <div class = "content">
         <p>Tip about this picture</p>
      </div>
   </div>
</div>

我希望包含p元素的div在用户滚动时向下移动，类似于固定位置div，但在到达父容器的末尾时停止，所以我不会在图像时继续看到div它描述不再在屏幕上。我尝试过固定定位，固定定位在绝对定位内，以及Twitter Bootstrap的词缀功能。它们都允许物品破坏收容。有没有办法在没有javascript的情况下执行此操作？

Answer 1

使用HTML和CSS相当容易：http://jsfiddle.net/ZCuRq/。

HTML：

see fiddle

CSS：

*, :before, :after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 10px;
}

body p + p,
.container + p {
    margin-top: 20px;
}

.container > .content {
    width: 80%;
    outline: 2px solid rgba(200, 200, 200, 0.5);
}

.container:before {
    content: "This shows dynamic usage of fixed positioning";
    display: none;
}

.container:hover:before {
    position: fixed;
    display: block;
    width: 15%;
    right: 10px;
    top: 10px;
    outline: 2px solid #bbb;
    padding: 10px;
    font: normal 10px/2 Sans-Serif;
    background-color: #fff;
}

Answer 2

您可以尝试将父div设置为position:relative，将父div中的元素设置为position:absolute。您可以使用div，top，bottom和right在父left内调整元素的位置。

示例：

div.parent {
  position: relative;
}

div.parent div.element {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
}

http://jsfiddle.net/3teAj/

Answer 3

试试这个： - p { overflow : auto; } div.content { position : relative; }

需要一个元素表现得像position：fixed，但只在其父元素内

3 个答案: