Question

我正在努力实现像我附上的形象

这就是我在css中尝试做的事情，但无法让它发挥作用。

#div_1 {
  width: 90%;
  background: #FBFBFB;
  box-shadow: 1px 1px 30px rgba(0, 0, 0, .1);
}

#div_2 {
  height: 110%;
  width: 30%;
  margin-top: -5%;
  margin-left: 60%;
  vertical-align: top;
  background: #FBFBFB;
  box-shadow: 1px 1px 30px rgba(0, 0, 0, .1);
}

<div id="div_wrapper">
  <div id="div_1">
    <div id="div_2"></div>
  </div>
</div>

Answer 1

将position: relative提供给父，将position: absolute提供给子元素，这将确保子 >相对于父元素定位。然后，您可以根据相应的top和left 定位属性将其放置在您想要的任何位置，这些属性替换了不必要的边距：

＆＃13;

#div_1 {
  position: relative; /* added */
  width: 90%;
  background: #FBFBFB;
  box-shadow: 1px 1px 30px rgba(0,0,0,.1);
}

#div_2 {
  position: absolute; /* added */
  height: 110%; 
  width: 30%;
  top: -5%; /* modified */
  left: 60%; /* modified */
  background: #FBFBFB;
  box-shadow: 1px 1px 30px rgba(0,0,0,.1);
}

＆＃13;

<div id="div_wrapper">
  <div id="div_1">
    Div 1
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="div_2">
      Div 2
    </div>
  </div>
</div>

＆＃13;

Answer 2

您需要做的是将包装div位置设置为relative，并将其display属性设置为block。

现在，您可以为包装器设置所需的宽度和高度。

包装用红色虚线标记。

现在你必须设置子元素的高度以扩展到它们的包装div。你可以通过提供

来做到这一点

height: 100%

到div1

接下来是将子项与其父元素对齐。

通常要将子元素与其父元素对齐，您可以将父元素的位置设置为relative，将子元素设置为绝对值。

您可以将position: absolute设置为div2，将position:relative设置为div1 我建议使用top和left设置div2的位置，而不是margin-top和margin-left。

这是关于立场和常见错误的非常好的解释：

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

和https://css-tricks.com/absolute-positioning-inside-relative-positioning/您可以找到有关如何定位父元素和子元素的一些提示。

我稍微修改了你的代码，请看一下：

＆＃13;

   #div_wrapper {
     display: block;
     position: relative;
     height: 200px;  /* Change to whatever height you like */
     width: 400px;  /* Change to whatever width you like */
     top: 50px;  /* Just for demo */
     left: 10px; /* Just for demo */
   }
   
   #div_1 {
     display: block;
     position: relative;  /* Added */
     width: 90%;
     height: 100%;  /* Added */
     background: #FBFBFB;
     box-shadow: 1px 1px 30px rgba(0, 0, 0, .1);
   }
   
   #div_2 {
     position: absolute; /* Added */
     height: 110%;
     width: 30%;
     top: -5%;   /* Modified */
     left: 60%; /* Modified */
     vertical-align: top;
     background: #FBFBFB;
     box-shadow: 1px 1px 30px rgba(0, 0, 0, .1);
   }

＆＃13;

<div id="div_wrapper">
  <div id="div_1">
    <div id="div_2"></div>
  </div>
</div>

＆＃13;

Answer 3

尝试以下代码，它可能适用于您。当“＃div_1”具有内容或高度时，您将看到效果。

#div_1 {
  width: 90%;
  position: relative;
  background: #FBFBFB;
  box-shadow: 1px 1px 30px rgba(0, 0, 0, .1);
}

#div_2 {
  width: 30%;
  position: absolute;
  top: -5%;
  bottom: -5%;
  left: 60%;
  vertical-align: top;
  background: #FBFBFB;
  box-shadow: 1px 1px 30px rgba(0, 0, 0, .1);
}

Answer 4

<style type="text/css">
    #div_wrapper{
        position: relative;
        width: 100%;
    }
    #div_1 {
        width: 90%;
        background: #FBFBFB;
        box-shadow: 1px 1px 30px rgba(0, 0, 0, .1);
        height: 300px;
        margin-top: 100px;
        position: relative;
    }

    #div_2 {
            position: absolute;
            height: 120%;
            width: 30%;
            right: 5%;
            top:-10%;
            background: #FBFBFB;
            box-shadow: 1px 1px 30px rgba(0, 0, 0, .1);         
        }
</style>
<div id="div_wrapper">
    <div id="div_1"> div 1
        <div id="div_2">div 2</div>
    </div>
</div>

Answer 5

您可以尝试下面的代码段。您无需提及.child div的高度，因为它会在您设置top和bottom时计算出来。

＆＃13;

.parent {
  position: relative;
  width: 80%;
  height: 80vh;
  margin: 5% auto;  
  background: #fff;
  box-shadow: 0px 0px 5px #000;
}
.child{
  position: absolute;
  top:-5%;
  bottom:-5%;
  right: 10%;
  width: 30%;
  background: #fff;
  box-shadow: 0px 0px 5px #000;
}

＆＃13;

<div class="parent">
  <div class="child">
  </div>
</div>

＆＃13;

Answer 6

对于此布局，如果您使用position:absolute用于div_2 ID而position:relative用于div_1 ID，这将是一件好事，这会让您将子div放在相对位置到父母，它取决于div_1的高度。

#div_1 {
  width: 90%;
  background: #FBFBFB;
  display:inline-block;
  position:relative;
  box-shadow: 1px 1px 30px rgba(0, 0, 0, .1);
}

#div_2 {
  width: 30%;
  position:absolute;
  right:10%;
  top:-10px;
  bottom:-10px;
  vertical-align: top;
  background: #FBFBFB;
  box-shadow: 1px 1px 30px rgba(0, 0, 0, .1);
}
#div_wrapper{
  text-align:center;
  margin:50px 0px;
  }

<div id="div_wrapper">
  <div id="div_1">test
    <div id="div_2">test2</div>
  </div>
</div>

将div叠加在另一个div上

6 个答案: