我有以下CSS
.bloodparam > .highvalue { bottom: 12px; right: 25%; }
和
.bloodparam > .highvalue { bottom: 12px; left: 75%; }
理想情况下,无论我使用哪一个,元素的位置都必须相同,但我看到的位置不同。任何想法为什么?
请看这个小提琴http://jsfiddle.net/956y5/1/ - 你会看到第一行和第二行的正确指示器是不同的
我有以下CSS
.bloodparam > .highvalue { bottom: 12px; right: 25%; }
和
.bloodparam > .highvalue { bottom: 12px; left: 75%; }
理想情况下,无论我使用哪一个,元素的位置都必须相同,但我看到的位置不同。任何想法为什么?
请看这个小提琴http://jsfiddle.net/956y5/1/ - 你会看到第一行和第二行的正确指示器是不同的
当然它是不同的,你有一个任意宽度的元素,左右是从左边或骑边计算的。从左边缘计算的 75% 与从右边缘计算的 25% 不同,即离左边多少像素。
left
位置值从给定的指定左侧值开始计算,并将宽度放在该位置的右侧
right
位置值从给定的指定右侧值开始计算,并将宽度放在位置的左侧
从视觉上您可以在示例中看到这一点,前 100 名的右侧部分与底部的左侧部分匹配。
这是有充分理由的。以 和 的比较left:0
为例right:0
。如果它们是等效的,则left
版本将位于屏幕的最左侧并显示全宽,但right
版本将位于屏幕的最右侧并且不可见。尽管如此,它会将元素定位在显示全宽的位置,但它可能是最右边的值
从技术上讲,您的两个值都是错误的,因为left
并right
考虑了它所定位的元素的宽度。为了完全准确,您还需要在被定位元素一半宽度的一侧有一个负边距。通过给出左值可以很容易地看到错误100%
,然后标记完全移动到范围之外
25% 和 75% 是右元素边框和右页面边框/左元素边框和左页面边框之间的距离。为您的小提琴添加一些背景可能会澄清这一点(我只是添加background-color: blue
了两个元素):