为什么CSS左75%和右25%的工作方式不同?

时间:2013-10-15 00:00:21

标签: css css-position absolute

我有以下CSS

.bloodparam > .highvalue { bottom: 12px; right: 25%; }

.bloodparam > .highvalue { bottom: 12px; left: 75%; }

理想情况下,无论我使用哪一个元素,元素的位置必须相同,但我看到不同的位置。有什么想法吗?

请看这个小提琴http://jsfiddle.net/956y5/1/ - 你会看到第一行和第二行的正确指标不同

3 个答案:

答案 0 :(得分:2)

当然它有所不同,你有一个任意宽度的元素,左边和右边是从左侧或侧面计算的。从左边缘计算的75%与从右边缘计算的25%不同,即从左边开始计算的距离。

答案 1 :(得分:2)

left位置值是在给定的指定左值下以开始计算的,并将宽度放在该位置的右侧

right位置值是在指定的正确值下以开始计算的,并将宽度放在该位置的 left

视觉上你可以在你的例子中看到这一点,前100名的右边部分与底部的左边部分相匹配。

这是有充分理由的。以left:0right:0的比较为例。如果它们相同,则left版本将位于屏幕的最左侧,并显示全宽,但right版本将位于屏幕的最右侧,不可见。但是,它确实将元素定位在显示整个宽度的位置,但它位于最右边的值

从技术上讲,你的两个值都是错误的,因为leftright会考虑它所定位的元素的宽度。为了完全准确,您需要在所定位元素宽度的一半的一侧具有负边距。通过给出左值100%可以很容易地看出错误,然后标记完全移出范围

答案 2 :(得分:1)

25%和75%是右边元素边框与右边边框/左边元素边框和左边框边框之间的距离。为你的小提琴添加一些背景可能会澄清这一点(我刚刚将background-color: blue添加到两个元素中):

http://jsfiddle.net/956y5/3/