Html的定位方式

G81948577

于 2024-02-14 11:51:22 发布

阅读量848

点赞数 13

文章标签： html 前端

本文链接：https://blog.csdn.net/G81948577/article/details/136111299

版权

1、position的属性值

static(静态:默认),relative(相对定位),absolute(绝对定位),fixed(固定定位)

2、position的配套属性

配套属性: left,right, top,bottom,z-index(层次,值越大越靠人眼)

注意使用配套属性的前提是position属性的值必须是relative(相对定位),absolute(绝对定位),fixed(固定定位)三种之一

3、使用场景

1.纯使用relative

保留元素的物理空间,定位的参考位置是元素本身,随着浏览器滚动条的滚动而移动

2.纯使用absolute

不保留元素的物理空间,定位的参考位置是浏览器,随着浏览器滚动条的滚动而移动

3.纯使用fixed

不保留元素的物理空间,定位的参考位置是浏览器,不随着浏览器滚动条的滚动而移动

4.结合使用relative和absolute

relative作用长辈元素 absolute作用该元素,达到该元素不保留元素的物理空间定位对象是距离最近的加了relative长辈元素,随着浏览器滚动条的滚动而移动

下面是一个绿色的块级元素，和一张为内敛级元素的图片，下面分别对其使用上面提到的四种应用场景

        .box {
            width: 300px;
            height: 100px;
            background: #27ae60;
        }
        
        img {
            width: 400px;
        }

1.对绿色部分纯使用relative

可以看到对left和bottom属性值的改变，让其在原来位置上产生了移动，并且img元素并没有移动到上方原来块级元素所占的位置

2.对绿色部分纯使用absolute

将position值改为了absolute后，绿色元素块原来的位置被图片所占（不保留元素的物理空间），并且其定位的参照也由本身所在位置换成了浏览器。修改left和bottom值后元素块开始以浏览器为参照移动。

3.对块级元素纯使用fixed

和absolute相同的是将position值改为了fixed后，绿色元素块原来的位置被图片所占（不保留元素的物理空间），并且其定位的参照也由本身所在位置换成了浏览器。修改left和bottom值后元素块开始以浏览器为参照移动，并且不论浏览器滚动条是否移动，其位置永远不变（不随浏览器的滚动而滚动）。

4.结合使用relative和absolute

将图片放到div里面，如下

<body>
    <div class="box">
        <img src="湖水.webp" alt="">
    </div>
</body>

对div使用relative定位，改变left和bottom值，绿色元素块位置发生改变，图片对于绿色元素块的相对位置则未发生改变

将绿色元素块设为relative，将图片设为absolute，这样再改变图片的left和top值这样就可以控制图片参照绿色元素块进行移动了。

那下面进行一个思考，怎么完成下面的这样的效果呢

<1> 文字浮动与图片之上，图片移动的同时文字和图片的相对位置不变。

<2>可以让文字所在元素块参照图片移动

首先的想法就是可以将文字元素块写到图片所在标签里面，可是这时候会发现一个问题，图片标签是一个单标签

<img src="湖水.webp" alt="">

是无法包含其他标签的，于是就可以采用下面这种长兄如父的思想

    <div class="father">
        <div class="box">
            8.1.2.3
        </div>
        <img src="湖水.webp" alt="">
    </div>

.father {
            position: relative;
            left: 0;
            top: 0;
        }
        
        .box {
            width: 80px;
            height: 30px;
            background: #27ae60;
            position: absolute;
            color: #fff;
            text-align: center;
            left: 0;
            top: 0;
        }
        
        img {
            width: 50%;
        }

让绿色文字元素块和图片元素成为兄弟，给他们整体设置一个父级元素，将其设置为relative，不设置宽高，这样父级元素显示的内容就完全是由内部图片和绿色元素块支撑起来的，再将绿色元素块设为absolute，这样绿色元素块将失去原本的位置，父级元素将完全由图片支撑，这样绿色元素块会参照父级元素定位可以等价于参照图片定位。

G81948577

关注

13
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
Html的定位方式

让绿色文字元素块和图片元素成为兄弟，给他们整体设置一个父级元素，将其设置为relative，不设置宽高，这样父级元素显示的内容就完全是由内部图片和绿色元素块支撑起来的，再将绿色元素块设为absolute，这样绿色元素块将失去原本的位置，父级元素将完全由图片支撑，这样绿色元素块会参照父级元素定位可以等价于参照图片定位。relative作用长辈元素 absolute作用该元素,达到该元素不保留元素的物理空间定位对象是距离最近的加了relative长辈元素,随着浏览器滚动条的滚动而移动。
复制链接

扫一扫