相对定位中的精准定位

马黑黑 · 发表于 2022-1-7 23:50

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

1

2

3

4

马黑黑 · 发表于 2022-1-8 00:18

本帖最后由马黑黑于 2022-1-8 00:23 编辑

一楼，设定了父div的宽度、高度均为500px，四个子元素高宽为60×60，命题是把这四个子元素放置到父容器的四个角。

解题思路：

用 position 的 relative 归置子元素，除第一个子元素外，余下三个各自设定其 left 和 top 值。先看HTML结构：

<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

里层的4个子div将默认垂直排列，它们的left和top值分别如下：

1 - 0 0
2 - 0 60
3 - 0 120
4 - 0 180

第二个子div将挪到父框的右上角，所以left值是父框宽度 - 子框宽度（500-60=440），top等于父框高度 -子框高度（500-60=440）

第三个子div要挪到左下角，left值不变，top值等于父框高度- 子框高度（500-60=440）

第四个子div挪到右下角，left和top值等于父框宽度/高度 - 子框宽度/高度（500-60=440）

下面是完整代码：

<style type="text/css">
.sD {
margin:0px auto;
width:500px;
height:500px;
background:#ccc;
}
.sD div {
width:60px;
height: 60px;
position:fixed;
background:#ff6666;
}
.sD div:nth-child(2) { left:440px; top:-60px; }
.sD div:nth-child(3) { left:0px; top:320px; }
.sD div:nth-child(4) { left:440px; top:260px; }
</style>
<div class="sD">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

复制代码

代码中 .sD div 是类选择器 .sD 下的所有 div 样式，而 .sD div:nth-child(n) 则是子元素下的第n个 nth-child 属性。

马黑黑 · 发表于 2022-1-8 00:31

子元素群的位置（position）只能定义为相对定位（relative）才能在容器中精准定位。

但定位是很神奇的，只要获得位置的 xy 坐标值，用position的 fixed 和 absolute 也一样可以精准定位，问题是目标坐标值在不同的显示分辨率下是有变化的，本机成功测试不意味着别人的显示设备也是这样。