zoukankan      html  css  js  c++  java
  • position 小结

    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>
  • 相关阅读:
    《Flutter实战入门》下拉刷新组件的使用方法
    百度HTTPS认证失败解决方法
    unity踩过的音频坑
    如何解决flutter中gradle慢的问题
    如何在ubuntu里面关掉后台的meteor
    ruby生成随机成绩
    Gemfile分平台加载gem
    sublime text2在windows中以命令行启动
    右键添加 CMD 命令提示符
    修复sublime text系统右键菜单
  • 原文地址:https://www.cnblogs.com/jiushui/p/9932777.html
Copyright © 2011-2022 走看看