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

    1.相对定位

      position:relative;

      (1)不脱离标准文档流,可以调整元素

      (2)以原来的位置为参考点

    position: relative;
    /*设置为相对定位*/
    top: 30px;
    /*向下移动30像素*/
    left: 100px;
    /*向右边移动100像素*/

    2.绝对定位

      position:absolute;

      (1)脱离标准文档流,不在页面占位。

      (2)层级提高,压盖现象。

      (3)参考点,相对于最近的非static祖先元素定位,如果没有非static祖先元素,那么以页面的根元素左上角进行定位。

      推荐:子绝父相,子元素用绝对位置,父亲元素用相对定位。

    position: absolute;
    /*设置为绝对定位*/
    top: 30px;
    /*向下移动30像素*/
    left: 100px;
    /*向右边移动100像素*/

    3.固定定位

      position:fixed;

      (1)脱离标准文档流。

      (2)一旦设置固定定位,在页面中滚动网页,位置固定不变。

      (3)参考点为浏览器的左上角。

      应用:小广告、回到顶部、固定导航栏。

    position: fixed;
    /*设置为绝对定位*/
    top: 30px;
    /*向下移动30像素*/
    left: 100px;
    /*向右边移动100像素*/

     4.z-index:

      当给元素设置了定位,则会存中z-index属性,默认值为auto,当多个设置了定位的元素,z-index值大的元素在上面。

      如果父级标签,设置了z-index属性,则子标签跟随父标签的z-index级别。

  • 相关阅读:
    Jdk1.8 HashMap源码分析
    瘦身部署应用
    Redis 创建和使用集群(yum方式安装低版本)
    Redis 创建和使用集群
    记录一下
    Oracle 开发人员权限控制
    Linux 免密登录远程服务器及执行相关命令
    Oracle 连接表空间并执行SQL文件
    MySQL 8.0.13安装教程(windows 64位) (转)
    scrapy中Selector的使用
  • 原文地址:https://www.cnblogs.com/wangdianchao/p/12521006.html
Copyright © 2011-2022 走看看