zoukankan      html  css  js  c++  java
  • css-position属性实例2

    position

    1) fixed 固定在页面某个位置
    2) absolute 也可以固定在某个位置,一般结合relative使用
    
    注:
    1)fixed和absoulue区别,假如一个div固定在右下角。滚动滑轮时,fixed是一直固定在右下角,而absolute是跟着走滑轮走。
    2)  
      <div style="position:relative;">   <div style="position:absolute;top:0;left:0;> <!--这个时候就不是以整个页面固定,而是以父类标签的某个位置固定--> </div>

    absolute示例:固定位置

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    
        <div style="height: 40px; 40px;color: white;position: absolute;right: 0;bottom:0 ">1111</div>
        <div style="height: 5000px;background-color: red"></div>
    
    </body>
    </html> 

    relative+absolute示例:以父类标签的某个位置固定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="height: 200px; 500px;border: 1px solid red;position: relative;margin: 0 auto">
           <div style="height: 40px; 40px;position: absolute;top:0;right: 0"></div>
        </div>
        <div style="height: 200px; 500px;border: 1px solid red;position: relative;margin: 0 auto">
            <div style="height: 40px; 40px;position: absolute;bottom:0;left: 0"></div>
        </div>
        <div style="height: 200px; 500px;border: 1px solid red;position: relative;margin: 0 auto">
            <div style="height: 40px; 40px;position: absolute;top:0;left: 0"></div>
        </div>
    </body>
    </html>

    示例:多层使用

    1)使用position固定
    2)使用opacity设置透明度
    3)z-index设置权重,越大表示越显示在上面
    4)position: fixed;top:50%;left: 50% 是以左上角来固定,通过margin-left: -250px;margin-top: -250px;来调整使第三个div居中
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <div style="position: fixed;top:50%;left: 50%;z-index: 10;height: 400px; 400px;margin-left: -250px;margin-top: -250px;"></div>
    <div style="position: fixed;top:0;left: 0;right: 0;bottom:0;opacity: 0.5;z-index: 9"></div>
    <div style="height: 5000px;z-index: 8"></div>
    </body>
    </html>
     
  • 相关阅读:
    HihoCoder1105 题外话·堆(基础二叉搜索树)
    HihoCoder1080 更为复杂的买卖房屋姿势(线段树+多重lazy)
    HihoCoder1078线段树的区间修改(线段树+lazy)
    HihoCoder1070 区间最小值(简单线段树)
    HDU3577Fast Arrangement(线段树+lazy)
    POJ2985 The k-th Largest Group (并查集+treap)
    HihoCoder1337 动态第k大(treap)
    STL的erase函数和lower_bound
    HihoCoder1329 平衡树·Splay(附STL版)
    etcd 在超大规模数据场景下的性能优化
  • 原文地址:https://www.cnblogs.com/lixiang1013/p/7563365.html
Copyright © 2011-2022 走看看