堆叠格在另一个DIV

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

只要给相对于父位置和位置绝对给孩子。我还将孩子的边缘替换为顶部和左侧。

#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%; /* changed */ 
 
    left: 60%; /* changed */ 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0,0,0,.1); 
 
}

<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>

Answer 2

你需要做的是设置您的包装DIV的位置相对，并设置它的显示性能阻拦。

现在你可以设置你想要的宽度和高度的包装。

包装用红色虚线标记。

现在，你必须设置高度为子元素扩展到它们的包装股利。 你可以做到这一点通过提供

height: 100% 

到DIV1

下一步是使子项到他们的父元素。

通常要将一个子元素与它的父元素对齐，您可以将父元素的位置设置为相对子元素和子元素作为绝对元素。

您可以设置position: absolute div2和position:relative div1 我建议使用顶部和左侧设置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/你可以找到关于如何定位父和子元素的一些技巧。

我已经修改了你的代码了一下，看看在这里：

#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); 
 
    }

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

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时会计算它的高度。

.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; 
 
}

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

Answer 6

此布局这将是很好，如果你使用position:absolute为div_2 ID和position:relative为div_1 ID，这会让你的立场在任何地方相对于父子格，它是取决于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>