これらの値はCSSでどのように優先されますか？

私はCSSを勉強していて、という相対的なレイアウトで混乱しています。あなたがポジショニングのために矛盾するプロパティ値を与えるとどうなりますか？例left: 50px;とright 50px;これらの値はCSSでどのように優先されますか？

のために私は自分自身を試してみたとleftとrightの両方があれば、私が言うことができるものから、rightは必ず落とします。また、約top対bottomについては？

例

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div.relative { 
    position: relative; 
    left: 30px; 
    right: 30px; 
    border: 10px solid #73AD21; 
} 
</style> 
</head> 
<body> 

<h2>position: relative;</h2> 

<p>Lorem Ipsum insert text here....</p> 

<div class="relative"> 
This div element has position: relative; 
</div> 

</body> 
</html>

出典

2017-03-11 northerner

MDNより：

場合右CSSプロパティと左CSS特性の両方の要素の位置をオーバースペックされ、定義されます。その場合、コンテナが左から右（つまり右の計算値が-leftに設定されている）の場合は左の値が優先され、コンテナが右から左の場合は右の値が優先されます左の計算値が-rightに設定されていることです）。

direction: ltrの場合、leftが優先されます。 direction: rtlの場合は、rightが優先されます。 topとbottomについて

（MDN）：

上部と底部があれば、高さが不特定、自動または100％であるように、指定された、両方の頂部と底部の距離共にを尊重されます。そうでない場合、高さがどのような方法でも制約されている場合、上部のプロパティが優先され、bottomプロパティは無視されます。

出典

2017-03-11 11:46:11

「トップ」が「ボトム」を上回っているようですが、ドキュメントではそれを見つけることができません。 – northerner

「top」と「bottom」に関する情報を含めるように答えを編集しました。それが助けられたら、それの隣にあるチェックマークをクリックして、答えを受け入れたものとしてマークしてください。参照：[回答の受け取りはどのように受け付けますか？]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work） –

これらの値はCSSでどのように優先されますか？

答えて

関連する問題