zoukankan      html  css  js  c++  java
  • css之定位

    定位--->固定一个位置             (设置水平和垂直的距离)

    一:固定定位

    固定定位属性:position:fixed;
    
    
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

    div{
    200px;
    height: 200px;

    }
    .one{
    background-color: #288dd1;
    position: fixed;
    200px;
    height: 200px;
    left: 200px;
    top:200px;

    }
    .two{
    background-color:#ff8500;
    left: 300px;
    top:300px;
    }
    </style>
    </head>
    <body>
    <span class="one">uyuyu

    </span>
    <!--<div class="one"></div>-->
    <div class="two"></div>

    </body>
    </html>
    特点 1:不占据原来标准流的位置 2:可以模式转换 3:定位的基准是以浏览器为基准的

    二:绝对定位

    绝对定位属性:position:absolute;
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                height: 200px;
                width: 200px;
            }
            .one{
                background-color: #ff8500;
                position: absolute;
                left: 300px;
                top:300px;
                height: 200px;
                width: 200px;
            }
            .two{
                background-color: #288dd1;
                top: 200px;
                left: 200px;
            }
        </style>
    </head>
    <body>
    <span class="one"></span>
    <!--<div class="one"></div>-->
    <div class="two"></div>
    </body>
    </html>
    
    特点
    1:不占据原来标准流的位置
    
    2:可以模式转换
    
    3:如果设置了父元素的定位,绝对定位是相对于父元素而言的,否则就是相对于浏览器

    三:相对定位

    相对定位的属性:position:relative;
    
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    
        <style>
    
            div{
                height: 200px;
                width: 200px;
            }
            .one{
                background-color: #288dd1;
                position: relative;
                top: 200px;
                left: 200px;
            }
            .two{
                background-color: #ff8500;
                top: 300px;
                left:300px;
                
            }
        </style>
    </head>
    <body>
    <div class="one"></div>
    <div class="two"></div>
    
    </body>
    </html>
    
    
    特点
    
    1:占据原来在标准流中的位置
    
    2:不能模式转换
    
    3:定位是相对于标准流的位置而言的

    四 :静态定位

    静态定位属性:position:static;
    
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                height: 200px;
                width: 200px;
            }
            .one{
                background-color: #ff8500;
                top: 200px;
                left: 200px;
                position: static;
            }
            .two{
                background-color: #288dd1;
                top: 200px;
                left: 200px;
            }
        </style>
    </head>
    <body>
    <div class="one"></div>
    <div class="two"></div>
    </body>
    </html>
    
    特点
    1:占据原来的位置
    
    2:不能模式转换
    
    3:定位怎么设置都没有效果,静态定位就是标准流(默认)
  • 相关阅读:
    C语言实现字母接龙的小程序
    求教有关C++中子对象析构的问题
    Leaflet中使用leafletsidebar插件实现侧边栏效果
    Leaflet中使用LeafletMiniMap插件实现小地图效果
    Leaflet中使用leafletsearch插件实现搜索定位效果
    Leaflet中使用awesomemarkers插件显示带图标的marker
    Leaflet中使用Leaflet.Spin插件实现地图加载等待效果
    Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果
    Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
    Leaflet中使用Leaflet.MagnifyingGlass实现放大镜效果
  • 原文地址:https://www.cnblogs.com/woshidameinv/p/5843427.html
Copyright © 2011-2022 走看看