DAY 7定位position-优快云博客

本文链接：https://blog.youkuaiyun.com/igotosleep/article/details/124393477

本文详细介绍了HTML5前端定位的三种方式：相对定位(relative)、绝对定位(absolute)和固定定位(fixed)，包括各自的特点、参考物及如何进行偏移描述。通过理解这些定位方式，开发者可以更好地控制网页元素的位置和层级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

定位position

前言
一、相对定位 relative
二、绝对定位 absolute
三、固定定位 fixed
作用

前言

默认状态下是静态定位static

一、相对定位 relative

1、参考物：定位前所在的位置
2、特点：
①不影响元素本身特性
②元素不脱离文档流
③相对于原位置进行偏移

.second {
            position: relative;
            left: 30px;
        }

在这里插入图片描述

二、绝对定位 absolute

1、参考物：最近的使用了定位的父级，如果没有找就body
2、特点：
①元素脱离文档流
②行元素支持所有css样式
③块元素内容撑开宽高
④清除子级的浮动

.d1 {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: cyan;
            overflow: hidden;
            margin-left: 50px;
        }
        
        .d2 {
            /* position: fixed; */
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: gold;
            overflow: hidden;
        }
        
        .d3 {
            width: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
        }
        
        span {
            float: left;
        }

在这里插入图片描述

三、固定定位 fixed

1、参考物：浏览器窗口
2、特点：
①脱离文档流
②清除子级的浮动

div {
            width: 100px;
            height: 300px;
            position: fixed;
            top: 260px;
            background-color: cyan;
        }
        
        .left {
            left: 10px;
        }
        
        .right {
            right: 10px;
        }