固定親を持つ相対的な子のボトムプロパティは機能しません

Question

私はposition:relative ; bottom: 0;を持つ子要素と、position: fixed ; height: 100vh;を持つ親divを持っています。子要素が底には行かないのはなぜですか？あなたの下にはフルコードがあります。インスペクタでは、下部にある代わりに上部に.secondaryの形状が表示されます。

HTML

<div class="fullpagenav active_nav"> 
    <div id="secondary" class="secondary toggled-on" aria-expanded="true"> 
    ... 
    </div> 
</div> 

CSS

.fullpagenav { 

    position: fixed; 
    height: 100vh; 
    width: 100%; 
    z-index: 2; 

} 

.secondary.toggled-on { 

    width: 100%; 
    display: block; 
    bottom: 0; 
    position: relative; 

} 

Answer 1

position: relative位置が正常に配置されるに対する元素。

つまり、bottom: 0は、通常配置される場所から要素をオフセットしないと言います。

あなたが探していることはposition: absolute

が、ここでは異なる位置の値の説明を参照してくださいされています。特にhttps://developer.mozilla.org/en/docs/Web/CSS/position

を、それがこの程度relative（強調鉱山）言う：

このキーワードは、要素が配置されていないかのようにすべての要素を配置し、レイアウトを変更せずに要素の位置を調整します（したがって、th e要素が配置されていなかったはずです）。

Answer 2

（I）vertical-align: bottom;

（II）、相対位置の要素に子供に親とposition : absoluteに

Answer 3

Bottomをposition : relativeを追加するCSSのプロパティに

を使用して、2つのソリューションが存在することができますどのように遠くを意味あなたはその下を自動位置から動かしたいと思う。あなたのケースでは、それはそれが望むところにとどまる0になります。

.fullpagenav { 
    display: flex; 
    flex-direction: colum; 
} 

.secondary.toggled-on{ 
    margin-top: auto; 
} 

Answer 4

かposition: relative作品ではありません： あなたはposition: absoluteやフレキシボックスのいずれかが必要です。 bottom: 0を設定したときにここでやろうとしている親に相対的な要素の位置付けは行わず、その要素を親の下にします。つまり、position: absoluteが対象ですが、通常の要素の流れからその要素を取り除きます。したがって、親要素にはdisplay: flex、子要素にはalign-self: flex-endを使用することもできます。 ; `絶対：`位置を使用していないのはなぜ

body, html { 
 
    margin: 0; 
 
} 
 
.fullpagenav { 
 
    position: fixed; 
 
    height: 100vh; 
 
    width: 100%; 
 
    z-index: 2; 
 
    background: gray; 
 
    display: flex; 
 
} 
 

 
.secondary.toggled-on { 
 
    width: 100%; 
 
    background: black; 
 
    color: white; 
 
    align-self: flex-end; 
 
}

<div class="fullpagenav active_nav"> 
 
    <div id="secondary" class="secondary toggled-on" aria-expanded="true"> 
 
    Div 
 
    </div> 
 
</div>