css四种定位详解并附有代码展示及效果

最新推荐文章于 2023-09-05 15:02:50 发布

summer-7

最新推荐文章于 2023-09-05 15:02:50 发布

阅读量672

点赞数 5

分类专栏： HTML 文章标签： css3

本文链接：https://blog.youkuaiyun.com/summer_567/article/details/112890477

版权

HTML 专栏收录该内容

4 篇文章

订阅专栏

css定位

css定位分为四种不同类型，position的值为static,relative,absolute,fixed

1.static （静态定位）

它是默认值，元素框正常生成的，top left bottom right这几个偏移属性不会影响其静态定位的正常显示。

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态定位</title>
    <style type="text/css">
        .big{
            width: 900px;
            height: 600px;
            background-color: yellow;
        }
        .small{
            width: 450px;
            height: 300px;
            background-color: aquamarine;
            position: static;
            left: 80px;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="small"></div>
    </div>
</body>
</html>

效果展示

你们家分店在这里插入图片描述

代码解说

在这个相对定位代码中，有两个div块，其中名为small的div是名为big的div的子级，在他们的css中我给名为small的div设置了static（静态定位），同时也设置了left属性值，从效果图中可以看出它是不起任何作用，并没有影响它原来的位置。

relative(相对定位)

生成相对定位的元素，相对于正常位置进行定位，也就是说相对于本身位置进行定位，用left，right，top，bottom进行该元素位置偏移。

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style type="text/css">
        .big{
            width: 900px;
            height: 600px;
            background-color: yellow;
        }
        .small{
            width: 450px;
            height: 300px;
            background-color: aquamarine;
            position: relative;
            left: 80px;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="small"></div>
    </div>
</body>
</html>

效果展示

在这里插入图片描述

absolute(绝对定位)

生成绝对定位的元素，它是相对于static定位以外第一个父级元素进行定位。前提是它的父级元素设置了除static定位外的定位，如relative或absolute或fixed，那么它才会根据它的父级进行定位。如果它的父级也没有设置的话，就要看父级的父级有没有设置了，以此类推，总之，它的定位是相对于它的第一个设置除static定位外的定位的父级进行，如果都没有设置的话，他将根据body来定位（并非浏览器，fixed定位才是根据浏览器窗口进行定位）。它也是用left，right，top，bottom属性值进行设置去令它偏移到想要的位置上。

代码展示

<!-- 这是给它的父级元素没有设置除static定位外的定位 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style type="text/css">
        .big{
            width: 600px;
            height: 300px;
            background-color: yellow;
        }
        .small{
            width: 150px;
            height: 150px;
            background-color: aquamarine;
            position: absolute;
            left: 80px;
            bottom: 400px;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="small"></div>
    </div>
</body>
</html>

<!-- 这是给它的父级元素设置了除static定位外的定位 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style type="text/css">
        .big{
            width: 600px;
            height: 300px;
            background-color: yellow;
            position: relative;
        }
        .small{
            width: 150px;
            height: 150px;
            background-color: aquamarine;
            position: absolute;
            left: 80px;
            bottom: 40px;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="small"></div>
    </div>
</body>
</html>

效果展示

在这里插入图片描述

fixed(固定定位)

生成固定定位元素，相对于浏览器窗口进行定位。并且他不会随着浏览器的滚动条的滚动而改变位置。它也是用left，right，top，bottom属性值进行设置去令它偏移到想要的位置上。

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style type="text/css">
    body{
        height: 3000px;
    }
        .big{
            width: 600px;
            height: 300px;
            background-color: yellow;
            position: relative;
        }
        .small{
            width: 150px;
            height: 150px;
            background-color: aquamarine;
            position: fixed;
            left: 80px;
            bottom: 40px;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="small"></div>
    </div>
</body>
</html>

效果展示

在这里插入图片描述