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

相对定位中的精准定位

<style type="text/css">
.sD {
        margin:0px auto;
        width:500px;
        height:500px;
        background:#ccc;
}
.sD div {
        width:60px;
        height: 60px;
        position:relative;
        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>

马黑黑 发表于 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 也一样可以精准定位，问题是目标坐标值在不同的显示分辨率下是有变化的，本机成功测试不意味着别人的显示设备也是这样。

马黑黑 发表于 2022-1-8 00:35

这帖发错位置了。麻烦管管移一下，谢谢

加林森 发表于 2022-1-8 10:19

又一教程，真好！{:4_199:}

加林森 发表于 2022-1-8 10:22

帮着你转过来了。

马黑黑 发表于 2022-1-8 10:57

加林森 发表于 2022-1-8 10:22
帮着你转过来了。

辛苦{:4_190:}

加林森 发表于 2022-1-8 11:12

马黑黑 发表于 2022-1-8 10:57
辛苦

不辛苦的

马黑黑 发表于 2022-1-8 11:13

加林森 发表于 2022-1-8 11:12
不辛苦的

{:4_180:}

加林森 发表于 2022-1-8 11:13

马黑黑 发表于 2022-1-8 11:13


谢茶

马黑黑 发表于 2022-1-8 11:13

{:4_181:}

马黑黑 发表于 2022-1-8 11:52


红影 发表于 2022-1-8 19:11

第三个开始没看懂，左边看懂了，高度分别是320和260是怎么来的？

马黑黑 发表于 2022-1-8 20:03

本帖最后由 马黑黑 于 2022-1-8 20:05 编辑

红影 发表于 2022-1-8 19:11
第三个开始没看懂，左边看懂了，高度分别是320和260是怎么来的？
默认情况下，子 div 是垂直排列，第三个子 div 的原始位置的top值为 500- 前面两个子 div 的高度相加值，即 380，当它下移是，它再纵向移动 380 - 自身宽度 便可达成底边与父框底边相靠。

红影 发表于 2022-1-8 22:57

马黑黑 发表于 2022-1-8 20:03
默认情况下，子 div 是垂直排列，第三个子 div 的原始位置的top值为 500- 前面两个子 div 的高度相加值， ...

嗯嗯，大概有点明白了，也就是按纵向排列，已经有了120，那么500-120得到380，是这样么。

马黑黑 发表于 2022-1-8 23:35

红影 发表于 2022-1-8 22:57
嗯嗯，大概有点明白了，也就是按纵向排列，已经有了120，那么500-120得到380，是这样么。

对。在原位置移动到新位置。

红影 发表于 2022-1-8 23:40

马黑黑 发表于 2022-1-8 23:35
对。在原位置移动到新位置。

这个还是挺难理解的，习惯了原来那种直接从顶上下来多少，忘记有叠加这回事{:4_173:}

马黑黑 发表于 2022-1-9 07:33

红影 发表于 2022-1-8 23:40
这个还是挺难理解的，习惯了原来那种直接从顶上下来多少，忘记有叠加这回事

<p>默认：孩子 div 们在父亲 div 哪里是酱紫排列的：<br><br></p>
<style>
.father { margin: 0 auto; width:500px; height:500px; border:1px solid red; }
.father div { width:60px; height:60px; line-height:60px; text-align:center; border:1px solid olive; }
</style>

<div class="father">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
</div>

红影 发表于 2022-1-9 17:04

马黑黑 发表于 2022-1-9 07:33
默认：孩子 div 们在父亲 div 哪里是酱紫排列的：

.father { margin: 0 auto; width:500px; height:50 ...

额嗯，明白了，每一个都已经在纵向占位了。

马黑黑 发表于 2022-1-9 17:59

红影 发表于 2022-1-9 17:04
额嗯，明白了，每一个都已经在纵向占位了。

对，默认是这样。当然可以设置
页: [1] 2
查看完整版本: 相对定位中的精准定位