CSS_定位

最新推荐文章于 2024-08-08 11:48:45 发布

Mudrock__

最新推荐文章于 2024-08-08 11:48:45 发布

阅读量84

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/Mudrock__/article/details/124315325

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!--
position
偏移方位：
    top、bottom、left、right
定位方式：
    默认定位：static 此时不受偏移方位影响
    相对定位：relative 偏移相对于默认定位而言
    绝对定位：absolute 偏移相对于最近的已定位的父级元素 若无则相对于<html>定位
             fixed 偏移相对于浏览器窗口
一般遵循子绝父相 即父级元素相对定位 子级元素绝对定位
-->

代码段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    position
    偏移方位：
        top、bottom、left、right
    定位方式：
        默认定位：static 此时不受偏移方位影响
        相对定位：relative 偏移相对于默认定位而言
        绝对定位：absolute 偏移相对于最近的已定位的父级元素 若无已定位的父级元素 则相对于<html>定位
                fixed 偏移相对于浏览器窗口
    一般遵循子绝父相
    -->
    <style>
        body{
            padding: 10px;
        }
        div{
            border: 1px solid cornflowerblue;
        }
        #d{
            width: 200px;
        }
        #space{
            height: 2000px;
        }
        #relative{
            background: aqua;
            position: relative;
            top: 5px;
            right: 10px;
        }
        #absolute{
            background: deepskyblue;
            position: absolute;
            top: 10px;
            right: 50px;
        }
        #fixed{
            background: gray;
            position: fixed;
            top: 50px;
            right: 20px;
        }
    </style>
</head>
<body>
<div id="d">
    <div id="relative">我是相对定位relative</div>
    <!--由于父级元素（div id=d）未进行定位 故该div偏移相对于<html>-->
    <div id="absolute">我是绝对定位absolute</div>
    <div id="fixed">我是绝对定位fixed</div>
</div>

<div id="space"></div>
</body>
</html>

运行效果

Mudrock__

关注

0
点赞
踩
0

收藏

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

代码段<!DOCTYPE ht.
复制链接

扫一扫

专栏目录