码迷,mamicode.com
首页 > 其他好文 > 详细

position 小结

时间:2018-11-09 00:51:42      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:font   影响   蓝色   orm   sticky   pos   ext   文档   tom   

position:

  1. static
  2. fixed
  3. relative
  4. absolute
  5. sticky

1.static

  static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中。因此,这种定位不会受到top,bottom,left,right的影响

正常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 

技术分享图片

 

插入后:

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            /*这里*/
            position: static;
            top: -100px;
            left: -100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2.fixed

  fixed定位是指元素的位置相对于浏览器窗口是固定的位置,即使窗口滚动它也不会滚动,且fixed定位会使元素脱离文档流,即,元素不占据空间,比如,网页经常跳出来的小广告。

正常:

 技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .top{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 20px;
        }
        .bottom{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>
</html>

插入后:

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .top{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 20px;
        }
        .bottom{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-bottom: 20px;
            /*这里*/
            position: fixed;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>
</html>

注意:fixed定位在IE7和IE8下需要描述!DOCTYPE才能支持

3.relative

  相对定位元素的定位是相对它自己的正常位置的定位

正常:

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .normal{
            width: 100px;
            height: 20px;
            background-color: black;
            border: 1px solid black;
            margin-bottom: 20px;
        }
        .top{
            width: 100px;
            height: 20px;
            background-color: red;
            border: 1px solid black;
            margin-bottom: 20px;
        }
        .bottom{
            width: 100px;
            height: 20px;
            background-color: yellow;
            border: 1px solid black;
            margin-bottom: 20px;
        }
        .left{
            width: 100px;
            height: 20px;
            background-color: blue;
            border: 1px solid black;
            margin-bottom: 20px;
        }
        .right{
            width: 100px;
            height: 20px;
            background-color: green;
            border: 1px solid black;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="normal"></div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

插入后:

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .normal{
            width: 100px;
            height: 20px;
            background-color: black;
            border: 1px solid black;
            margin-bottom: 20px;
        }
        .top{
            width: 100px;
            height: 20px;
            background-color: red;
            border: 1px solid black;
            margin-bottom: 20px;
            /*这里*/
            position: relative;
            top: 10px;
            left: 0px;
        }
        .bottom{
            width: 100px;
            height: 20px;
            background-color: yellow;
            border: 1px solid black;
            margin-bottom: 20px;
            /*这里*/
            position: relative;
            left: 0px;
            bottom: 10px;
        }
        .left{
            width: 100px;
            height: 20px;
            background-color: blue;
            border: 1px solid black;
            margin-bottom: 20px;
            /*这里*/
            position: relative;
            left: 10px;
            top: 0px;
        }
        .right{
            width: 100px;
            height: 20px;
            background-color: green;
            border: 1px solid black;
            margin-bottom: 20px;
            /*这里*/
            position: relative;
            right: -20px;
            top: 0px;
        }
    </style>
</head>
<body>
    <div class="normal"></div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

 

注意:这里移动后是移动前的负的位置

    移动后对于移动前:如果值为负数,则直接换成正数

                如果值为正数,则直接改变为相反方向

即使相对元素的内容移动了,但是预留的空间的元素,仍然保持正常流动,也就是说相对移动后不会对下面的元素造成影响

技术分享图片       技术分享图片

可以对比一下,蓝色的框并没有因为黄色的框移上去而跟着移上去,黄色的框仍然保持原来的占位

4.absolute

  绝对定位的元素相对于最近的已经定位的父元素,如果元素没有已经定位的父元素,那么它的位置相对于<html>

正常:

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .father{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
        }
        .son{
            width: 30px;
            height: 30px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

没有已经定位的父元素:

 技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .father{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
        }
        .son{
            width: 30px;
            height: 30px;
            background-color: yellow;
            /*这里*/
            position: absolute;
            top: 20px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

有已经定位的父元素:

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .father{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
            /*这里*/
            position: relative;
        }
        .son{
            width: 30px;
            height: 30px;
            background-color: yellow;
            /*这里*/
            position: absolute;
            top: 20px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

position 小结

标签:font   影响   蓝色   orm   sticky   pos   ext   文档   tom   

原文地址:https://www.cnblogs.com/jiushui/p/9932777.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!