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

时间:2014-07-21 04:24:22

标签: css twitter-bootstrap css-position

如果它在这种情况下有所不同,我正在使用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的情况下执行此操作?

3 个答案:

答案 0 :(得分: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;
} 

答案 1 :(得分:0)

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

示例:

div.parent {
  position: relative;
}

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

http://jsfiddle.net/3teAj/

答案 2 :(得分:-2)

试试这个: -
p {
   overflow : auto;
 }

div.content {
   position : relative;
 }