以下是我的代码
Stream

Stream

我希望my-div应该涵盖not-my-div的整个区域。
not-my-div不在我的掌控之中,所以我无法对它做任何事情 宽度和高度不固定。
下面是我想要的样本。
答案 0 :(得分:0)
如果你可以"覆盖" .not-my-div的局部CSS规则,执行此操作
.not-my-div {
position: relative; /** ADD THIS **/
}
.my-div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: aqua;
opacity: .5;
}
如果你不能覆盖"部分CSS规则.not-my-div但你可以在所有段落之上移动.my-div;这样做
<div class="not-my-div">
<div class="my-div"></div>
<p>Some Text Here</p>
<p>Other Text Here</p>
</div>
编辑样式如下
.my-div {
position: absolute;
width: WIDTH_OF_not_my_div;
height: HEIGHT_OF_not_my_div;
background-color: aqua;
opacity: .5;
}
如果你不能覆盖&#34; .not-my-div的局部CSS规则,你不能在.not-my-div中移动.my-div;这样做
参见jQuery
使用jQuery您将拥有一个动态脚本。如果.not-my-div宽度发生变化,也会自动更改.my-div =)
首先,您需要将jQuery文件添加到HTML代码中。启动jQuery脚本AFTER页面加载后
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="not-my-div">
<p>Some Text Here</p>
<div class="my-div"></div>
</div>
<script>
/** Launch script AFTER page load **/
jQuery(document).ready(function ($) {
$notMyDiv = $('.not-my-div');
$myDiv = $('.my-div');
var notMyDivOffset = $notMyDiv.offset(); /** Contains .not-my-div position **/
$myDiv.css('position', 'absolute');
$myDiv.css('top', notMyDivOffset.top);
$myDiv.css('left', notMyDivOffset.left);
$myDiv.css('width', $notMyDiv.outerWidth()); /** Take .not-my-div width with border **/
$myDiv.css('height', $notMyDiv.outerHeight()); /** Take .not-my-div height with border **/
$myDiv.css('backgroundColor', 'red');
$myDiv.css('opacity', '0.5');
})
</script>
答案 1 :(得分:0)
您可以尝试使用负边距,因为您无法控制 not-my-div 。当然,负边距将取决于 p 标记内的文字大小:
.not-my-div {
width: 300px;
height: 200px;
background-color: antiquewhite;
border: 1px solid black;
}
.my-div {
float: left;
width: 100%;
height: 100%;
background-color: aqua;
opacity: .5;
}
&#13;
<div class="not-my-div">
<p>Some Text Here</p>
<div class="my-div"></div>
</div>
&#13;
如果您也无法控制文本并且它是一个动态的文本,您可以尝试使用JS解决方案来获取p标记的高度并应用负边距,如下所示:
$('.my-div').css('margin-top','-'+$('.not-my-div p').outerHeight(true)+'px');
&#13;
.not-my-div {
width: 300px;
height: 200px;
background-color: antiquewhite;
border: 1px solid black;
}
.my-div {
float: left;
width: 100%;
height: 100%;
background-color: aqua;
opacity: .5;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="not-my-div">
<p>Some Text Here</p>
<div class="my-div"></div>
</div>
&#13;
答案 2 :(得分:-1)
如果您希望div与同一容器内的所有内容重叠,则应设置
position: absolute;