他のdiv要素の下にdiv要素を配置する方法

Question

div要素が2つあります。私は、次の操作を実行する方法を理解したい：

私はHTMLとCSS持っている：ブロックINERこのCSSコードセンター

<div class="main"> 
     <div class="iner"></div> 
    </div> 

そして

.main{ 
    width: 1000px; 
    height: 500px; 
    background-color: #111210; 

} 

.iner{ 
    width: 250px; 
    height: 250px; 
    background-color: #34cb2f; 
    margin: 0 auto; 
    bottom: 0; 
} 

をしかし、それはトップの位置に表示されます。 imegeのようにメインブロックの下部にinerブロックを置く方法は？ ありがとうございました！

Answer 1

使用フレキシボックスにposition:absolute;を設定親要素

に設定position:relative;：

.main { 
    width: 1000px; 
    height: 500px; 
    background-color: #111210; 
    display: flex; 
    justify-content: center; 
} 

.inner { 
    width: 250px; 
    height: 250px; 
    background-color: #34cb2f; 
    align-self: flex-end; 
} 

https://jsbin.com/yuwubutiqi/

Answer 2

• インナー要素

.main{ 
 
    position:relative; /* ADD THIS! */ 
 
    height: 200px; 
 
    background-color: #111210; 
 
} 
 

 
.iner{ 
 
    position:absolute; /* ADD THIS! */ 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #34cb2f; 
 
    bottom: 0; 
 
    /* some centering now... */ 
 
    left:50%; 
 
    transform: translateX(-50%); -webkit-transform: translateX(-50%); 
 
}

<div class="main"> 
 
    <div class="iner"></div> 
 
</div>

Answer 3

メインのdivの幅が500pxなどで、内側のdivの幅が300ピクセル

.main{ 
     width:500px; 
     height:auto:margin:auto; 
     background-color:green; 
     border:1px solid #000000; 
     min-height:500px;position:relative 
     } 

.inner{ 
     width:300px; 
     height:auto; 
     min-height:300px; 
     background-color:yellow; 
     position:absolute; 
     bottom : 0; 
     margin-right:100; 
     margin-left:100px" 
     }