是否有可能使div
绝对特定的相对div
而不仅仅是父母?
例如。我有一个包含在一行内的div。但是,我希望它在section
而不是row
中是绝对的。由于WordPress主题样式,两个div都定位于relative
。如果我使用位置absolute
它将使它绝对row
。
我该如何解决这个问题?
.section {
width: 100%;
height: 100%;
position: relative;
background: #f5f5f5;
}
.row {
width: 80%;
height: 100%;
position: relative;
background: #000000;
margin: 0 auto;
}
.content {
width: 200px;
height: 200px;
background: pink;
position: absolute;
right: 0;
top: 0;
}
<div class="section">
<div class="row">
<div class="content">
</div>
</div>
</div>
这不是定位的工作原理。 div或任何其他元素与其父母有关其定位的相关性。如果你想在你所拥有的部分中放置一个元素,最好按如下方式构造你的代码:
<div class="section">
<div class="absoluteDiv">
</div>
<div class="row">
</div>
</div>
你可以找到更多的例子here
希望它有所帮助,Konstantinos。
虽然你不能对一个特定的div做一个div绝对,但是获得你想要的结果的一种方法是将overflow:visible;
添加到行中并将left:100%;
添加到内容容器中。为了演示目的,我将剖面高度更改为300px
,但它与100%
的行为相同。
.section {
width: 100%;
height: 300px;
position: relative;
background: #f5f5f5;
}
.row {
width: 80%;
height: 100%;
position: relative;
background: #000000;
margin: 0 auto;
overflow:visible;
}
.content {
width: 200px;
height: 200px;
background: pink;
position: absolute;
left: 100%;
top: 0;
}
<div class="section">
<div class="row">
<div class="content">
</div>
</div>
</div>