当前位置：首页 > news >正文

CSS学习14[重点]--定位、边偏移、定位模式

news 来源：原创 2024/9/20 5:35:20

定位

前言
一、定位
二、定位模式
- 1. 静态定位 static
- 2. 相对定位 relative
- 3. 绝对定位 absolute
- 4. 子绝父相
- 5. 绝对定位的盒子水平居中
6. 固定定位（fixed）
7. 叠放次序（z）
三、四种定位总结
四、定位模式转换

前言

为什么学习定位？
应用场景：图片上移动的物体、突出的部分、导航栏…

一、定位

边偏移

top: 100px;
bottom: ;
left: ;
right: ;
定位模式

选择器{position: absolute;}
值包含static|relative|absolute|fixed
完整定位=边偏移+定位模式

二、定位模式

1. 静态定位 static

（1）静态定位是所有元素默认的定位方式，即html的标准流。
（2）对于边偏移无效。
（3）一般用来清除定位

2. 相对定位 relative

（1）以自己的左上角为基准移动
（2）可以通过边偏移继续占有原来的位置
（3）相对定位的元素仍在原来的位置，相对定位不脱标，目的在于移动位置

<html>
<head><style>div {width: 100px;height: 100px;background-color: pink;}div:nth-child(2) {position: relative;top: 10px;background-color: purple;}</style>
</head>
<body><div></div><div></div>
</body>
</html>

3. 绝对定位 absolute

绝对定位完全脱标，不占有位置

（1）父级没有定位
如果父级没有定位，则以浏览器为标准定位。

<html>
<head><style>.father {width: 100px;height: 100px;background-color: pink;margin: 100px;}.son {width: 100px;height: 100px;position: absolute;top: 10px;left: 10px;background-color: purple;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

（2）父级有定位
如果父级有定位，则以父级为基准。

<html>
<head><style>.father {width: 100px;height: 100px;background-color: pink;margin: 100px;position: relative;}.son {width: 100px;height: 100px;position: absolute;top: 10px;left: 10px;background-color: purple;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

4. 子绝父相

子级是绝对定位，父级只要是定位即可。
相对定位占有位置不脱标
绝对定位不占有位置脱标

<html>
<head><style>div {width: 310px;height: 190px;border: 1px solid #fff;margin: 50px;padding: 10px;}.top {position: absolute;top: 0;left: 0; }</style>
</head>
<body><div><!--绝对定位，下面的会跑上去--><img src="#.jpg" alt=""><img src="#.jpg" alt="" class="top"></div>
</body>
</html>

5. 绝对定位的盒子水平居中

（1）加了绝对定位的盒子，margin: 0 auto; 无效
（2）如何使其水平居中？

	水平：left: 50%; margin-left: -w;垂直：top: 50%; margin-top: -h;

<html>
<head><style>.father {width: 500px;height: 300px;background-color: palegoldenrod;position: relative;margin: 0 auto;}.son {width: 100px;height: 100px;position: absolute;background-color: purple;margin: 0 auto; /*无效*/left: 250px;left: 50%; /*父级盒子一半*/margin-left: -50px;}</style>
</head>
<body><div class="father"><!--绝对定位，下面的会跑上去--><div class="son"></div></div>
</body>
</html>

（3）淘宝图例子

<html>
<head><style>* {margin: 0;padding: 0;}ul {list-style: none;}.slider {width: 500px;height: 300px;background-color: palegoldenrod;position: relative;margin: 50px auto;}.arrow-l,.arrow-r {width: 20px;height: 30px;position: absolute;background-color: purple;display: block;top: 50%;margin-top: -10px;}.arrow-l {left: 0;}.arrow-r {right: 0;}/*小圆点*/.circle {width: 65px;height: 20px;background-color: rgba(0,0,0,0.3);position: absolute;bottom: 15px; /*靠下对齐*/left: 50%;margin-left: -32px;border-radius: 10px 10px;}.circle li {width: 10px;height: 10px;background-color: #ccc;float: left;margin: 5px 3px;border-radius: 50%;}</style>
</head>
<body><div class="slider"><!--绝对定位，下面的会跑上去--><img src="#.png"><a href="" class="arrow-l"><img src="#.png"></a><a href="" class="arrow-r"><img src="#.png"></a><ul class="circle"><li></li><li></li><li></li><li></li></ul></div>
</body>
</html>

6. 固定定位（fixed）

（1）固定定位是绝对定位的特殊形式
（2）固定定位的元素和父亲没有任何关系，只认浏览器
（3）固定定位完全脱标，不占有位置，不随滚动条滚动
（4）例子

<html>
<head><style>* {margin: 0;padding: 0;}.a {width: 100%;height: 10px;background-color: palegoldenrod;position: fixed;}.box {width: 100px;height: 1000px;background-color: purple;padding-top: 10px;}   </style>
</head>
<body><div class="a"></div><div class="box">123</div>
</body>
</html>

7. 叠放次序（z）

叠放次序用于调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，可以取值正整数、负整数、0.

<html>
<head><style>div {width: 200px;height: 200px;background-color: pink;position: absolute;top: 0;left: 0;}div:first-child {z-index: 1;}div:nth-child(2) {background-color: purple;top: 30px;left: 30px;z-index: 2;}div:nth-child(3) {background-color: skyblue;top: 60px;left: 60px;}</style>
</head>
<body><div></div><div></div><div></div>
</body>
</html>

注意：

z-index默认属性是0，取值越大，定位元素在层叠元素中越居上
如果取值相同，按照书写顺序后来居上
后面的数字不能加单位
只有相对定位、绝对定位、固定定位有这个属性，其余标准流、浮动、静态定位没有该属性

三、四种定位总结

定位模式
静态定位static：不脱标，正常模式
相对定位relative：不脱标，占有位置，相对自身移动
绝对定位absolute：完全脱标，不占有位置，相对于定位父级移动
固定定位fixed：完全脱标，不占有位置，相对于浏览器移动

四、定位模式转换

（1）和浮动一样，元素添加了绝对定位和固定定位后，元素模式会转换为行内块模式
（2）行内元素如果添加了绝对定位或者固定定位后，不用转换直接给高度和宽度。

<html>
<head><style>div {height: 200px;background-color: pink;/*float: left; 没给盒子宽度，浮动的盒子模式转换*//*position: fixed; relative不转换*/}span {background-color: aquamarine;display: block;width: 100px;height: 100px;float: left; /*如果盒子本身需要添加浮动、绝对定位，则不需要转换*/}</style>
</head>
<body><div>12345</div><span>行内元素</span>
</body>
</html>