相对定位和绝对定位以及固定定位

最新推荐文章于 2024-04-19 15:59:41 发布

朝思暮林

最新推荐文章于 2024-04-19 15:59:41 发布

阅读量680

点赞数

分类专栏： H5 文章标签： H5 css 定位

本文链接：https://blog.csdn.net/zhaolimulin/article/details/71305810

版权

H5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #left,#center,#right{
            float: left;
        }
        #left{
            width: 200px;
            height: 200px;
            background-color: #ea2000;
            z-index: -2;
        }
        #center{
            width: 200px;
            height: 200px;
            background-color: #ff7300;
            position: relative;  /*position: relative相对定位 占用空间不会给别人*/
            top: 20px;
            left: 50px;
            z-index: -1;
        }
        #right{
             width: 200px;
             height: 200px;
            background-color: aqua;
         }
        #other{
            width: 300px;
            height: 300px;
            background-color: #0D0000;
        }
    </style>
    <title>在css中的定位 相对定位</title>
</head>
<body>
<!--
           采用相对定位的元素 ： 会相对与他的位置进行定位
           并且，元素原始占用 的空间不会被其他的元素占用-->

<!--采用绝对定位的元素：会寻找离他最近的采用了定位的父元素，并以他为坐标进行定位
        如果所有的父元素都没有使用定位，则以body为坐标进行定位
        并且，元素占用的空间会被其他的元素占用-->
<div>
    <div style="position: relative;top: 100px ;left: 100px">

        <div>
            <div id="left"></div>
            <div id="center"></div>
            <div id="right"></div>
        </div>
    </div>
    <div id="other"></div>
</div>
</body>
</html>











<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #back{
            width: 100px;
            height: 100px;
            background-color: yellow;
            text-align: center;
            line-height: 100px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }
    </style>
    <title>固定定位</title>
</head>
<body>
<div style="height: 1000px">

    <div id="back">返回页面顶部 </div>
</div>
</body>
</html>

朝思暮林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
相对定位和绝对定位以及固定定位

采用相对定位的元素：会相对与他的位置进行定位并且，元素原始占用的空间不会被其他的元素占用-->
复制链接

扫一扫