Question

我正在学习CSS并且被相对布局弄糊涂了。如果您为定位提供冲突的属性值会发生什么？例如left: 50px;和right 50px;

我已经尝试过自己，据我所知，如果同时有right和left，right总会被删除。还有top vs 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>

Answer 1

来自MDN：

当定义了正确的CSS属性和左侧CSS属性时，元素的位置被过度指定。在这种情况下，当容器从左到右（即右计算值设置为-left）时，左值优先，而当容器从右到左时，右值优先（是左计算值设置为-right）。

因此，当direction: ltr时，left具有优先权。 direction: rtl时，right优先。

对于top和bottom（MDN）：

指定顶部和底部时，只要高度为未指定，自动或100％，顶部和底部距离都将是尊重。否则，如果高度受到任何限制，则顶部 property优先，bottom属性被忽略。

这些值如何优先于CSS？

1 个答案: