我正在学习CSS并且因相对布局而感到困惑.如果您为定位提供冲突的属性值会发生什么?例如左:50px;和50px;
我已经尝试了自己,从我所知道的,如果左右都有,那么总是会掉线.顶部还是底部呢?
例
<!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>
解决方法
从
MDN开始:
When both the right CSS property and the left CSS property are defined,the position of the element is overspecified. In that case,the left value has precedence when the container is left-to-right (that is that the right computed value is set to -left),and the right value has precedence when the container is right-to-left (that is that the left computed value is set to -right).
所以,当方向:ltr时,左边有优先权.当方向:rtl,右边有优先权.
When both top and bottom are specified,as long as height is unspecified,auto or 100%,both top and bottom distances will be respected. Otherwise,if height is constrained in any way,the top property takes precedence and the bottom property is ignored.