CSS绝对定位的div后div的定位问题

Question

什么是在css中恢复页面流的最佳方法。

这是我的情况：

我有3个div，div 1（父级），div 1（子级）和div 2（普通）。父div为absolute，子div为relative。到目前为止，一切都好。我遇到的问题是，下一个普通div被移动到与绝对div相同的行上（因为我通过将父div设置为absolute而破坏了页面的流程）。

所以我的问题是，我如何将正常的div放在具有absolute位置的div下面。我只需偏移margin-top属性吗？

感谢您的所有帮助！

请查看：https://jsfiddle.net/veLgmdt1/

- max234435

Answer 1

如果您知道绝对定位元素的height，那么很容易解决。只需添加等于已知高度的padding / margin或占位符div。

如果高度是动态的，则必须使用jQuery/JavaScript。

请查看我的演示，其中显示了默认行为和上述方法：

// get the absolute-positioned element
var abs = $("#dynamic .absolute");

// get height of absolute-positioned element
var absHeight = abs.height();

// insert placeholder div with height equal to absolute-positioned element
$("<div class='placeholder'></div>").height(absHeight).insertAfter(abs);

section {
  position: relative;
  padding: 1em;
  margin: 1em;
  border: 1px solid #CCC;
}

section div {
  border: 1px dashed blue;
}

.absolute {
  position: absolute;
  top: 0;  z-index: 1;
  border:1px solid red;
  height:50px;
}

#margin .absolute+div {
  margin-top:50px;
}

#padding .absolute+div {
  margin-top:50px;
}

.placeholder { height:50px; border:none }

#dynamic .absolute {
  height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Default Behaviour</h3>
<section>
  <div class="absolute">position:absolute</div>
  <div>normal div</div>
</section>

<h3>Known height: top margin</h3>
<section id="margin">
  <div class="absolute">position:absolute</div>
  <div>normal div with margin-top</div>
</section>

<h3>Known height: top padding</h3>
<section id="padding">
  <div class="absolute">position:absolute</div>
  <div>normal div with padding-top</div>
</section>

<h3>Known height: placeholder div</h3>
<section>
  <div class="absolute">position:absolute</div>
  <div class="placeholder"></div>
  <div>normal div</div>
</section>

<h3>Dynamic height: JavaScript/jQuery</h3>
<section id="dynamic">
  <div class="absolute">position:absolute</div>
  <div>normal div</div>
</section>

jsFiddle: https://jsfiddle.net/azizn/mq6bejhf/

- Aziz

Answer 2

http://jsfiddle.net/veLgmdt1/6

使用行和浮动列简化HTML结构。这将消除对边距和绝对定位的需求。

<div class="content-wrapper">
    <div class="row">
        <div class="col col-lg-3">
            <img src="http://lorempixel.com/230/230/" class="img-rounded">
            <button class="btn btn-primary">Invite To Project</button>
            <ul class="list-unstyled">
                <li>Member Since: July 21, 2016</li>
                <li>Toronto, ON</li>
                <li>
                    <ul class="list-inline">
                        <li>Social:</li>
                        <li><a href=""><i class="fa fa-facebook"></i></a></li>
                        <li><a href=""><i class="fa fa-twitter"></i></a></li>
                        <li><a href=""><i class="fa fa-pinterest"></i></a></li>
                        <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                        <li><a href=""><i class="fa fa-youtube"></i></a></li>
                    </ul>

                </li>

            </ul>
        </div>
        <div class="col col-lg-9">
            <h2 class="profile-name">John Doe</h2>
            <h4 class="">Graphic Designer</h4>
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

                Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
        </div>
    </div>
    <div class="row">
         <ul class="nav nav-pills" role="tablist">
            <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
            <li role="presentation"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
        </ul>
    </div>
</div>

CSS

.content-wrapper {
    width: 1000px;
    margin: 0 auto;
}

.row {
  width: 100%;
  padding-top: 20px;
}

.row:nth-child(odd) {
    background-color: #f5f5f5;
    border-bottom: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
}

.col {
  float: left;
}

.col-lg-3 {
  width: 25%
}

.col-lg-9 {
  width: 75%
}

.profile-heading {
   margin-top: 50px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #DDDDDD;
  border-top: 1px solid #DDDDDD;
}

.profile-heading > .panel {
  position: relative;
  background-color: inherit;
  margin: 0 auto;
  width: 1000px;
  border: none;
}

- Ryan Dantzler

---

那没起作用。看看我刚刚放在jsfiddle上的东西。 - max234435

最好尽量少使用绝对定位元素，这样就不必为定位调整边距。在这种情况下，我认为您不需要绝对定位。 - Ryan Dantzler

是的，我想我有点困惑。你所说的“灰色空间”具体在哪里？ - Ryan Dantzler

你的意思是你想要按钮出现在页面底部，即lorem ipsum文本下面吗？ - Ryan Dantzler

我刚刚更新了这个链接：https://jsfiddle.net/max234435/veLgmdt1/4/。请看一下“主页”和其他链接在底部的位置。这正是我所说的“灰色下方”位置。因此，我的问题是，除了使用margin-top属性来偏移下一个div之外，是否有更好的方法？ - max234435