zoukankan      html  css  js  c++  java
  • CSS Positioning(定位)

    CSS Positioning(定位)


    position 属性指定了元素的定位类型。

    position 属性的四个值:

    • static
    • relative
    • fixed
    • absolute

    元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。


    static 定位

    HTML元素的默认值,即没有定位,元素出现在正常的流中。

    静态定位的元素不会受到 top, bottom, left, right影响。


    fixed 定位

    元素的位置相对于浏览器窗口是固定位置。

    即使窗口是滚动的它也不会移动:

    实例

    p.pos_fixed { position:fixed; top:30px; right:5px; }

    Fixed定位使元素的位置与文档流无关,因此不占据空间。

    Fixed定位的元素和其他元素重叠。


    relative 定位

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

    实例

    h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }

    可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。

    实例

    h2.pos_top { position:relative; top:-50px; }

    相对定位元素经常被用来作为绝对定位元素的容器块。


    absolute 定位

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

    实例

    h2 { position:absolute; left:100px; top:150px; }

    absolute 定位使元素的位置与文档流无关,因此不占据空间。

    absolute 定位的元素和其他元素重叠。


    重叠的元素

    元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

    z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

    一个元素可以有正数或负数的堆叠顺序:

    实例

    img { position:absolute; left:0px; top:0px; z-index:-1; }

    具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

  • 相关阅读:
    [LeetCode] 771. Jewels and Stones
    [LeetCode] 129. Sum Root to Leaf Numbers
    java定时器demo
    Spring Boot与监控管理
    springboot与热部署
    springboot中的web项目不能访问templates中的静态资源
    @Component 和 @Bean 的区别
    springcluoud入门
    Dubbo和Zookerper的关系
    Spring boot配置Dubbo三种方式
  • 原文地址:https://www.cnblogs.com/cheer-up/p/7192314.html
Copyright © 2011-2022 走看看