Question

我试图在它的父DIV（文章）容器之外可视地定位DIV（文章标题）。这可能吗？

enter image description here

我的标记示例可在此处找到 - http://codepen.io/calebo/pen/CGoyD

Answer 1

试试这个：

.main {
  background: tomato;
  float: left;
  width: 600px;
  margin-top: 30px;        /* above Layout adjustment */
  /* removed overflow: hidden; */
  /* use always clearfix method instead */
}
.article_header {
  background: SteelBlue;
  color: #fff;
  position: absolute;
  bottom: 100%;
  margin-bottom: 10px;  /* to neutralize padding of parent container */
  left: -10px;          /* to neutralize padding of parent container */
  padding: 10px;        /* to neutralize padding of parent container */
  right: -330px;        /* to neutralize padding of parent container */
}
.main > article{
  position: relative;
}
.aside {
  background: cyan;
  float: right;
  width: 300px;
  margin-top: 30px;        /* above Layout adjustment */
}

<强> Working Codepen

要进行调整，请使用保证金属性。

Answer 2

这样的事情可以做到

<div class="wrapper">        
<h2>Desired effect</h2>

    <div class="inner-wrap">
        <div class="main">
            <article>
                <header class="article_header">article header - unknown height</header>
                <section class="article_body">article body</section>
            </article>
        </div>
        <div class="aside">aside</div>
    </div>
</div>

CSS

body {
    font-family: helvetica, arial, sans-serif;
}
.wrapper {
    margin:0 auto;
    width:80%;
}
h2 {
    text-align: center;
}
.inner-wrap {
    background: none repeat scroll 0 0 #CCCCCC;
    margin: 41px auto 0;
    position: relative;
    width: 940px;
}
.inner-wrap > * {
    padding: 10px;
}
.main {
    background: tomato;
    float: left;
    width: 600px;
}
.article_header {
    background: none repeat scroll 0 0 #4682B4;
    color: #FFFFFF;
    left: 0;
    padding: 1%;
    position: absolute;
    top: -39px;
    width: 98%;
}
.aside {
    background: cyan;
    float: right;
    width: 300px;
}

jsfiddle：http://jsfiddle.net/w26yw/1/ ，即：http://jsfiddle.net/w26yw/1/show/

Answer 3

你可以这样做：

.inner-wrap {position: relative; overflow: visible;}

.inner-wrap:after {content:""; display:table; clear:both;}

.article_header {position: absolute; width: 940px; left: 0; bottom: 100%;}

我已移除overflow: hidden并将其替换为clearfix方法。

Answer 4

这是最干净的解决方案。它基本上是原始的@Mr_Green答案，稍加修复。

.main > article {
  position: relative;
}
.article_header {
  background: SteelBlue;
  color: #fff;
  position: absolute;
  bottom: 100%;
  margin-bottom: 10px;  /* to neutralize padding of parent container */
  margin-left: -10px;   /* to neutralize padding of parent container */
  padding: 0px 10px;    /* to neutralize padding of parent container */
  width: 920px;
}
.inner-wrap {
  background: #ccc;
  width: 940px;
  margin: 0 auto;
  /* remove overflow: hidden */
}

这里是working CodePen

将子内容定位在父容器之外

4 个答案: