子div应覆盖其父div的整个区域

Question

以下是我的代码

＆＃13;

＆＃13;

Stream

＆＃13;

Stream

＆＃13;

＆＃13;

＆＃13;

我希望my-div应该涵盖not-my-div的整个区域。

not-my-div不在我的掌控之中，所以我无法对它做任何事情 宽度和高度不固定。

下面是我想要的样本。

Answer 1

方法1：使用CSS

如果你可以＆＃34;覆盖＆＃34; .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;
}

如果你不能覆盖＆＃34;部分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

方法2：使用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>

Answer 2

您可以尝试使用负边距，因为您无法控制 not-my-div 。当然，负边距将取决于 p 标记内的文字大小：

＆＃13;

＆＃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;

<div class="not-my-div">
  <p>Some Text Here</p>
  <div class="my-div"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您也无法控制文本并且它是一个动态的文本，您可以尝试使用JS解决方案来获取p标记的高度并应用负边距，如下所示：

＆＃13;

＆＃13;

$('.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;

＆＃13;

＆＃13;

Answer 3

如果您希望div与同一容器内的所有内容重叠，则应设置

position: absolute;