通过CSS calc 方法精准定位子元素
本帖最后由 马黑黑 于 2022-3-17 14:17 编辑 <br /><br /><style>.papa { width: 100%; min-height: 600px; position: relative;}
.papa p { padding: 8px 0; }
.ball { position: absolute; width: 100px; height: 100px; border-radius: 50%; background: rgba(255, 0, 0, .5); left: calc(100% - 120px); top: 20px; }
</style>
<div class="papa">
<p>定位子元素，要求父元素和子元素最好同时都设置了 position 值，一般建议父盒子用 relative，子元素用 absolute（当然也可用relative）。若此，我们对子元素在父盒子中的定位，就可通过设定 left 和 top 值来实现。</p>
<p>但我们应该事先明白一个道理，那就是，子元素的初始位置。在web里，所有元素依据彼此间的关系、代码流中的自然顺序确定其初始位置，例如，A是父元素，B是子元素，那么，B的初始位置受到A的影响，然后，如果B的前面有了一些（个）其他子元素，那么，它的初始位置就紧跟在这些（个）子元素之后，否则，如果B是A的第一个子元素，则可以确定B的left和top值都为0，也就是它待在在父盒子的左上角位置。</p><p>不过，初始位置是子元素的自然位置，我们可以通过修改其left和top值改变，令其去到我们需要它去的地方。例如：</p>
<p>left: 20px;<br>top: 20px;</p>
<p>这时，它仍然在左上角，不同于初始位置（不论在哪里）的是，它现在必须在离父盒子左、上边缘都是20px的位置之上。</p><p>那么，我们想放到父盒子的左下角位置，怎么做？</p>
<p>这种需求，left好确定，我们就定为20px吧，<font color="#ff0000">left: 20px;</font> top值则需要计算：如果知道父盒子的高度，则可用 （父盒子高度 - 子元素高度 - 20）得出top值；如果不能确定父盒子的高度，则需要通过CSS的 calc 方法求得（假设子元素的高度为100px）：</p><p>top: calc(100% - 120px);</p>
<p>这里，100% 这个数值是父盒子的完整高度，120px 中，100是子元素高度，20是我们预设的距父盒子下边缘的距离。<b>calc 很神奇，可以这样列算式，但必须注意，括号内的数学运算符号两边要有一个空格</b>。</p><p>定位在右下角：</p><p>left: calc(100% - 120px);<br>top: calc(100% - 120px);</p><p>定位在右上角：</p><p>left: calc(100% - 120px);<br>top: 20px;</p><p>定位在正中央。50%是不行的，要把它往左、上各拉回50px（也就是子元素的宽、高度的一半）：</p><p>left: calc(50% - 50px);<br>top: calc(50% - 50px);</p><p>其它位置的设定，思路仍然可用 calc 去实现，要考虑的就是它离开边缘多少距离。例如，我们想把子元素放在右上角偏下、偏内一点的位置：</p><p>left: calc(100% - 150px);<br>top: calc(100% - 200px);</p><p>本楼的粉红色球球处在右上角，与右边缘、上边缘各拉开 20px 的距离。这个漂亮的球球其实是红色的，因为用了 rgba 设定了 alpha 透明，看上去像是粉红色。</p>
<div class="ball"></div>
</div> @东篱闲人
@加林森
@红影
@绿叶清舟
@小辣椒
@小九
来了来了。已经收藏了。谢谢老黑的无私奉献。{:4_199:} 收到，可以用百分数扣除一定的值来定位，对于无法明确知道父框尺寸的情况下，是十分有效的方式呢。谢谢黑黑{:4_187:} 子元素有跟随父元素的功能，这点真好。以前调整父框生怕影响到子元素的位置，事实上它们会跟着一起跑的{:4_173:} 挺深奥的，俺认真学习一下。。。{:5_112:} 收藏，慢慢学习消化{:4_190:} 先来学习了 绿叶清舟 发表于 2022-3-17 17:18
先来学习了
这个好学 加林森 发表于 2022-3-17 14:28
来了来了。已经收藏了。谢谢老黑的无私奉献。
客气了，学到就好 红影 发表于 2022-3-17 14:39
收到，可以用百分数扣除一定的值来定位，对于无法明确知道父框尺寸的情况下，是十分有效的方式呢。谢谢黑黑 ...
嗯，这个挺管用的 小九 发表于 2022-3-17 16:02
收藏，慢慢学习消化
{:5_108:} 红影 发表于 2022-3-17 14:41
子元素有跟随父元素的功能，这点真好。以前调整父框生怕影响到子元素的位置，事实上它们会跟着一起跑的{:4_ ...
这是自然的，也符合自然现象和社会现象。例如，一个家庭，家长是父元素，其他的是子元素，一家长为核心的家庭，子元素们自然紧密团结在其周围。 马黑黑 发表于 2022-3-17 18:03
客气了，学到就好
嗯嗯，明白的，谢谢！{:4_190:} 东篱闲人 发表于 2022-3-17 15:40
挺深奥的，俺认真学习一下。。。
几个单词，一个算式，对教授不是个问题 加林森 发表于 2022-3-17 18:14
嗯嗯，明白的，谢谢！
{:5_108:} 马黑黑 发表于 2022-3-17 18:15
{:4_190:} 黑黑老师代码知识渊博，每天都能花样翻新地呈现，辛苦了{:4_187:} 马黑黑 发表于 2022-3-17 18:02
这个好学
适合俺这种无脑的{:4_189:} 马黑黑 发表于 2022-3-17 18:12
嗯，这个挺管用的
在黑黑这总能学到新东西{:4_187:}