html中元素的定位详解

最新推荐文章于 2021-06-07 11:22:26 发布

行云流水的刘

最新推荐文章于 2021-06-07 11:22:26 发布

阅读量5.3k

点赞数 5

文章标签：学习笔记

本文链接：https://blog.csdn.net/sinat_31907813/article/details/82763851

版权

1.关于定位我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

			1.static，默认值，去除元素的定位。也就是不进行定位

			2.relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。

			3.absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

			4.fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位,这个就类似于某网址的小广告嘿嘿嘿。

2.定位元素的偏移

			定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

3.定位元素层级

			定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

4.注意点:

	1.使用定位的时候，一般top和bottom不要同时使用，lefe 和 right 不要同时使用。除非特殊情况。
	2.元素使用了定位以后，可以设置层级，通过z-index进行设置，所有的元素的z-index默认值为0，我们可以通过z-index，设置不同的值来控制定位元素之间的覆盖。值越大的，层级越高，值越小，层级就越低，如果定位元素的层级为-1，则会被普通没有定位的元素进行覆盖。
参考代码：

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*.box{*/
            /*width: 200px;*/
            /*height: 200px;*/
            /*background: green;*/
            /*position: relative;!*相对定位,让元素相对于自身原有的位置定位*!*/
            /*bottom: 100px;*/
            /*!*!*left: 100px;*!让元素相对于原来的位置 向右调整100px*!*/
            /*top: 100px;*/
            /*right: 100px;*/
        /*}*/

        /*.box{*/
            /*width: 200px;*/
            /*height: 200px;*/
            /*background: pink;*/
            /*position: absolute;!*绝对定位,让元素相对父元素进行定位*!*/
            /*left: 0px;*/
            /*top: 0px;;*/

        /*}*/
        /*.son{*/
            /*width: 50px;*/
            /*height: 50px;*/
            /*position: absolute;*/
            /*background: green;*/
            /*left: 50px;*/

        /*}*/

        .box{
            width: 200px;
            height: 200px;
            background: pink;
            position: fixed;/*绝对定位,让元素相对父元素进行定位*/
            left: 800px;
            top: 500px;


        }
        .son{
            width: 50px;
            height: 50px;
            position: absolute;
            background: fixed;
            left: 50px;

        }
        body{
            height: 3000px;
        }

    </style>
</head>
<body>
        <div class="box">
            <div class="son"></div>
        </div>
        <p>z这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章这是文章</p>
</body>
</html>

行云流水的刘

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
html中元素的定位详解

1.关于定位我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下： 1.static，默认值，去除元素的定位。也就是不进行定位 2.relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。 3.absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的...
复制链接

扫一扫