css相对定位，绝对定位，static定位

最新推荐文章于 2024-08-11 10:27:53 发布

zhaihaohao1

最新推荐文章于 2024-08-11 10:27:53 发布

阅读量1.5k

点赞数

分类专栏： web前端demo

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/49403677

版权

web前端demo 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

<!--static定位-->
<!--static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。-->
<!--支持  padding:  margin:  float等属性-->
<!--http://www.w3school.com.cn/css/css_positioning.asp-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .mydiv{
            /*静态定位的水平居中*/
            /*
              1设置定位（一般为默认）position: static;
              2设置宽度width: 200px;
              3margin: 0 auto 0 auto;
              */
            position: static;
            width: 200px;
            margin: 0 auto 0 auto;/*上 右 下 左**/
        }
        .mydiv1{
            /*默认的定位static*/
            position: static;
            width: 100px;
            height: 100px;
            background-color: #0040D0;
            float: left;
        }
        .mydiv2{
            position: static;
            width: 100px;
            height: 100px;
            background-color: #00A000;
            float: left;
        }

    </style>
</head>
<body>
<div class="mydiv">
    <div class="mydiv1">
    </div>
    <div class="mydiv2">
    </div>
</div>
</body>
</html>

<!--绝对定位-->
<!--生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。（相对于浏览器定位）-->
<!--元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。-->
<!--不支持margin,padding,float属性-->
<!--http://www.w3school.com.cn/css/css_positioning.asp-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .mydiv1{
            background-color: #0040D0;
            /*默认的定位static*/
            width: 100px;
            height: 100px;
            /*
            水平居中
            1 position: absolute;(设置为据对定位)
            2 left: 50%;（left: 50%;如果设置成60%.70%。。。会偏移，这要根据实际需要）
            3 margin-left: -50px;（设置为宽度的一半，加上负号）
            */
            position: absolute;
            left: 50%;
            margin-left: -50px;
            /*
             竖直居中
             1 position: absolute;(设置为据对定位)
             2 top: 50%;（left: 50%;如果设置成60%.70%。。。会偏移，这要根据实际需要）
             3 margin-left: -50px;（设置为高度的一半，加上负号）
             */
            top: 50%;
            margin-top: -50px;
        }
        .mydiv2{
            position: absolute;
            width: 100px;
            height: 100px;
            /*距上面200px*/
            /*距左边200px*/
            top: 20%;
            left: 20%;
            background-color: #219161;
        }
    </style>
</head>
<body>
<div class="mydiv1">
</div>
<div class="mydiv2">

</div>
</body>
</html>

<!DOCTYPE html>
<!--相对定位-->
<!--相对定位是一个非常容易掌握的概念。
如果对一个元素进行相对定位，
它将出现在它所在的位置上。
然后，
可以通过设置垂直或水平位置，
让这个元素“相对于”
它的起点进行移动。-->
<!--参考http://www.w3school.com.cn/tiy/t.asp?f=csse_position_relative-->
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        h2.pos_left
        {
            position:relative;
            left:-20px
        }
        h2.pos_right
        {
            position:relative;
            left:20px
        }
    </style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>