请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2022-3-17 14:17 编辑
定位子元素，要求父元素和子元素最好同时都设置了 position 值，一般建议父盒子用 relative，子元素用 absolute（当然也可用relative）。若此，我们对子元素在父盒子中的定位，就可通过设定 left 和 top 值来实现。
但我们应该事先明白一个道理，那就是，子元素的初始位置。在web里，所有元素依据彼此间的关系、代码流中的自然顺序确定其初始位置，例如，A是父元素，B是子元素，那么，B的初始位置受到A的影响，然后，如果B的前面有了一些（个）其他子元素，那么，它的初始位置就紧跟在这些（个）子元素之后，否则，如果B是A的第一个子元素，则可以确定B的left和top值都为0，也就是它待在在父盒子的左上角位置。 不过，初始位置是子元素的自然位置，我们可以通过修改其left和top值改变，令其去到我们需要它去的地方。例如：
left: 20px;
top: 20px;
这时，它仍然在左上角，不同于初始位置（不论在哪里）的是，它现在必须在离父盒子左、上边缘都是20px的位置之上。 那么，我们想放到父盒子的左下角位置，怎么做？
这种需求，left好确定，我们就定为20px吧，left: 20px; top值则需要计算：如果知道父盒子的高度，则可用 （父盒子高度 - 子元素高度 - 20）得出top值；如果不能确定父盒子的高度，则需要通过CSS的 calc 方法求得（假设子元素的高度为100px）： top: calc(100% - 120px);
这里，100% 这个数值是父盒子的完整高度，120px 中，100是子元素高度，20是我们预设的距父盒子下边缘的距离。calc 很神奇，可以这样列算式，但必须注意，括号内的数学运算符号两边要有一个空格。 定位在右下角： left: calc(100% - 120px);
top: calc(100% - 120px); 定位在右上角： left: calc(100% - 120px);
top: 20px; 定位在正中央。50%是不行的，要把它往左、上各拉回50px（也就是子元素的宽、高度的一半）： left: calc(50% - 50px);
top: calc(50% - 50px); 其它位置的设定，思路仍然可用 calc 去实现，要考虑的就是它离开边缘多少距离。例如，我们想把子元素放在右上角偏下、偏内一点的位置： left: calc(100% - 150px);
top: calc(100% - 200px); 本楼的粉红色球球处在右上角，与右边缘、上边缘各拉开 20px 的距离。这个漂亮的球球其实是红色的，因为用了 rgba 设定了 alpha 透明，看上去像是粉红色。
| 
发表于 2022-3-17 13:57
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2022-3-17 14:28
发表于 2022-3-17 15:40
发表于 2022-3-17 19:09
