定位

最新推荐文章于 2023-09-07 10:17:46 发布

guokanglun

最新推荐文章于 2023-09-07 10:17:46 发布

阅读量125

点赞数

分类专栏： DIV + CSS

本文链接：https://blog.csdn.net/gklcsdn/article/details/108736551

版权

DIV + CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章目录

1. 定位（position）

相对定位： relative
绝对定位： absolute
固定定位：fixed

位置改变属性：
top
bottom
left
right

2. 相对定位

（1）位置改变相对于自身原本的位置
（2）不会脱离文档流

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        ul {
            width: 100px;
            border: 1px solid black;
        }
        
        li {
            width: 50px;
            height: 50px;
        }
        
        li:nth-child(1) {
            background-color: aquamarine;
        }
        
        li:nth-child(2) {
            background-color: blue;
            position: relative;
            top: 20px;
            left: 20px;
        }
        
        li:nth-child(3) {
            background-color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

在这里插入图片描述

3. 绝对定位

（1）默认情况下参考物是body
（2）直系父级元素用相对定位，找到第一个作为参考物
（3）脱离文档流
（4）父级相对定位，子级绝对定位
（5）绝对定位使内联元素支持宽高
（6）绝对定位元素宽度百分比相对于参考物宽度，而不是父级宽度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        ul {
            position: relative;
            margin: 100px auto;
            width: 100px;
            border: 1px solid black;
        }
        
        li {
            width: 50px;
            height: 50px;
        }
        
        li:nth-child(1) {
            background-color: aquamarine;
        }
        
        li:nth-child(2) {
            background-color: blue;
            position: absolute;
            top: 20px;
            left: 20px;
        }
        
        li:nth-child(3) {
            background-color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

在这里插入图片描述

4. 层级

绝对定位元素，越后面层级越高，层级越大越优先显示

z-index： 1

5. 固定定位

fixed

固定在浏览器某个区域

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: fixed;
            bottom: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

guokanglun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位

文章目录1. 定位（position）2. 相对定位3. 绝对定位4. 层级1. 定位（position）相对定位： relative绝对定位： absolute固定定位位置改变属性：topbottomleftright2. 相对定位（1）位置改变相对于自身原本的位置（2）不会脱离文档流<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt
复制链接

扫一扫

专栏目录