html 中的定位

最新推荐文章于 2024-07-27 10:56:19 发布

hansy2015

最新推荐文章于 2024-07-27 10:56:19 发布

阅读量486

点赞数

文章标签： html

本文链接：https://blog.csdn.net/gh6267/article/details/54291685

版权

html分相对定位和绝对定位
绝对定位元素会去寻找拥有定位属性的父元素，如果没有就会一直向上找知道body标签为止

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box1{
                width: 100px;
                height: 100px;
                background: red;
                /*绝对定位*/
                position: absolute;
                top: 50px;
                left: 50px;
                right: 100px;
                bottom: 100px;
            }
            #box2{
                width: 200px;
                height: 200px;
                background: yellow;
            }
            #box3{
                width: 300px;
                height: 300px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </body>
</html>

绝对定位使用top right left bottom 定位，像这样定位才有效
在上面的代码的基础上修改,顺便说一下绝对定位的层次问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        #box1{
            /*设置盒子的宽度100px长度100px背景颜色为红色*/
            width: 100px;
            height: 100px;
            background: red;
            /*绝对定位*/
            position: absolute;
            /*使用定位top right left bottom ，使用定位才有效*/
            top: 50px;
            left: 50px;
            right: 100px;
            bottom: 100px;
            /*绝对定位还有一个层次问题*/
            /*z-index 可以改变绝对定位的层次，z-index后面跟的数字越大越前面*/
            /*层次为1*/
            z-index: 1;
        }
        #box2{
            /*设置盒子长和宽分别为200px 200px 背景为黄色*/
            width: 200px;
            height: 200px;
            background: yellow;
            /*绝对定位*/
            position:absoulte;
            /*层次为0     如过你不写z-index的话那么浏览器将默认z-index为0*/
            z-index: 0;
        }
        #box3{
            width: 300px;
            height: 300px;
            background: blue;
            position: absolute;
            /*层次为-1*/
            z-index: -1;
        }
    </head>
    <body>
        /*使用第一个盒子*/
        <div id="box1"></div>
        /*使用第二个盒子*/
        <div id="box2"></div>
        /*使用第三个盒子*/
        <div id="box3"></div>
    </body>
</html>

下面说一下相对定位
相对定位是不会脱离文档影响后面的元素
相对定位是相对自己本身原来所在的位置进行改变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        #box1{
            width: 100px;
            height: 100px;
            background: relative;
            top: 100px;
        }
        #box2{
            /*设置盒子宽和高以及背景颜色*/
            width: 200px;
            height: 200px;
            background: yellow;
        }
        #box3{
            /*设置盒子宽和高以及背景颜色*/
            width: 300px;
            height: 300px;
            background: blue;
        }
        </style>
    </head>
    <body>
        /*使用上面的盒子*/
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </body>
</html>

绝对定位元素会去寻找拥有定位（也可以是相对定位）属性的父元素，
如果没有就会一直找直到找到body标签为止

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            html,body{
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
            #box1{
                width: 100%;
                height: 50%;
                background: red;
            }
            #box2{
                width: 100%;
                height: 50%;
                background: blueviolet;
            }
            #innerbox1{
                width: 50%;
                height: 100%;
                background: yellow;
                float: left;
                position: relative;
                /*relative 是指相对定位*/
            }
            #innerbox2{
                width: 50%;
                height: 100%;
                background: green;
                float: left;
            }
            #pink{
                width: 100px;
                height: 100px;
                background: pink;
                position: absolute;
                /*absolute 是指相对定位*/
                top: 0px;
            }
            #purple{
                width: 100px;
                height: 100px;
                background: purple;
                position: absolute;
                top: 0px;
            }
            /*定位元素会去寻找拥有定位属性的父元素，如果没有就会一直网上找直到body标签*/
        </style>
    </head>
    <body>
        <div id="box1">

        </div>
        <div id="box2">
            <!--因为innerbox1有绝对定位所以pink就以innerbox1为父元素进行定位-->
            <div id="innerbox1">
                <div id='pink'></div>
            </div>
            <!--因为innerbox2没有绝对定位所以purple就以body为父元素进行定位-->
            <div id="innerbox2">
                <div id="purple"></div>
            </div>
        </div>
    </body>
</html>