relative、absolute定位居中以及小总结

最新推荐文章于 2023-01-26 15:11:02 发布

会过敏的企鹅

最新推荐文章于 2023-01-26 15:11:02 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签： HTML CSS

本文链接：https://blog.csdn.net/qq_43623306/article/details/90605477

版权

relative、absolute 定位小总结:

一、relative 定位总结:

特点:

1.除了位置被left等四个属性影响,对元素没有任何影响(大小)

2.只设置position属性,元素没有任何变化

3.元素的参照位置是自身的初始位置

4.定位偏移后,元素的位置会被保留

5.定位元素会被提升层级,会遮挡没有定位的元素;如果都有定位,下面的元素层级会大于上面的元素

使用场景:

1.一定不能代替padding或者margin大面积使用

2.没有依赖关系的元素,可以用相对定位做位置的微调

3.只要能用padding,margin,floa解决的就不用relative定位

存在价值:

配合绝对定位(absolute)使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>relative相对定位</title>
    <style>
        .box {
            border: 1px solid red;          
        }
        .box div {
            background-color: green;
        }
        /* 每个元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性 */
        div.div1 {
            background: #0000ff;
            left: 10px;
            top: 200px;
            position: relative;
        }
        div.div2 {
            background:yellow;
            position: relative;
            top: 10px;
        }
        div.div3 {
            background:red;
            position: relative;

最低0.47元/天解锁文章

会过敏的企鹅

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
relative、absolute定位居中以及小总结

relative、absolute 定位小总结:一、relative 定位总结:特点:1.除了位置被left等四个属性影响,对元素没有任何影响(大小)2.只设置position属性,元素没有任何变化3.元素的参照位置是自身的初始位置4.定位偏移后,元素的位置会被保留5.定位元素会被提升层级,会遮挡没有定位的元素;如果都有定位,下面的元素层级会大于上面的元素...
复制链接

扫一扫