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

    CSS定位有五种

    static

    relative

    fixed

    absolute

    sticky


    static 为默认值 该是什么样 还是什么样,

     

    -------------------------------------------------------------------------------


    relative

    相对定位元素的定位是相对其正常位置。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
    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>
    View Code


    fixed

    固定在某个页面,以浏览器的界面为判断标准

    absolute 定位

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


    sticky 定位

    sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。

    position: sticky; 基于用户的滚动位置来定位。

    粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

    它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

    元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

    这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

    注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

    这个就很有意思了

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
    div.sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      padding: 5px;
      background-color: #cae8ca;
      border: 2px solid #4CAF50;
    }
    </style>
    </head>
    <body>
    
    <p>尝试滚动页面。</p>
    <p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
    
    <div class="sticky">我是粘性定位!</div>
    
    <div style="padding-bottom:2000px">
      <p>滚动我</p>
      <p>来回滚动我</p>
      <p>滚动我</p>
      <p>来回滚动我</p>
      <p>滚动我</p>
      <p>来回滚动我</p>
    </div>
    
    </body>
    </html>
    View Code

    根据状态而改变定位的方式


    z-index 属性指定一个元素的堆叠顺序。

    拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。


    补充

    top bottom left right 

    属性规定元素的上下左右边缘。该属性定义了定位元素左外边距边界与其包含块上下左右边界之间的偏移。’

    对于绝对定位元素,bottom属性设置单位高于/低于包含它的元素的底边。

    对于相对定位元素,bottom属性设置单位高于/低于其正常位置的元素的底边。

    如果 "position" 属性的值为 "static",那么设置 "xxxx" 属性不会产生任何效果。

  • 相关阅读:
    .NET XmlNavigator with Namespace
    编程要素
    【FOJ】1962 新击鼓传花游戏
    【POJ】1389 Area of Simple Polygons
    【POJ】2482 Stars in Your Window
    【HDU】3265 Posters
    【HDU】1199 Color the Ball
    【HDU】3642 Get The Treasury
    【HDU】4027 Can you answer these queries?
    【HDU】1542 Atlantis
  • 原文地址:https://www.cnblogs.com/bianzhuo/p/9985406.html
Copyright © 2011-2022 走看看