zoukankan      html  css  js  c++  java
  • 定位(相对定位、绝对定位、固定定位)

    定位:调整元素到网页一个指定位置,让元素处于一个完全脱离文档流的状态,即不会影响到其他元素的位置(和浮动半脱离文档流相比,浮动会影响到其他元素的位置)

    相对定位relative:相对于元素在正常文档流的位置的相对定位位置。四个偏移量,默认是0的时候,以元素标准流的四个角度为参考点,水平方向:left:正值向右,负值向左;right:正值向左,负值向右;垂直方向:top:正值向下,负值向上;bottom:正值向上,负值向下。

    绝对定位absolute:完全脱离文档流,可以将绝对定位属性的元素设置到网页中一个具体的坐标位置,默认参考点为网页的左上角,即left和top为0的时候,left和right指的是网页的左和上,right和bottom指的是窗口第一屏的右和下(注意是窗口第一屏,如果给绝对定位属性的元素设置right和bottom的值皆为0,那么该元素会在窗口第一屏的右下角,当网页内容超过第一屏向下移动后,该元素的位置仍然保持不变,不会移动到下一屏网页的右下角)。

    给元素设置为绝对定位后,设置宽高起作用,设置为相对定位仍然不起作用。

    相对定位和绝对定位配合使用:若要让某一个元素跟随其父元素(或祖先元素)保持原来的两元素之间的相对位置一起移动,则要采用“子绝父相”的定位方式:子和父指的是标签之间的关系,绝和相指的是给后代元素设置绝对定位,给祖先元素设置相对定位,此时后代元素默认的参考点是离其最近的设置为定位(包括相对定位和绝对定位)的祖先元素的四个角的参考点。

    层级(z-index):给元素设置定位后,层级默认都是0,当层级相同时,后写的标签会压在先写的标签的上面,当层级不同时,则层级大的标签会压在层级小的标签上。层级值的取值范围为整数,包括负整数、0、正整数。

    绝对定位元素水平垂直居中父元素:当元素设置为绝对定位后,要想水平(或垂直)居中于父元素,则应该设置left(或top)的值为50%,然后再设置margin-left(或margin-top)的值为负的该元素一半的宽度大小。因为当left(或top)的值为50%时会将元素的左边框移到父元素的居中位置,那么就还需要将该元素向左(或上)移动该元素宽度的一半距离,以使元素的中央对齐到父元素的中央位置。

    固定定位fixed:将元素固定在浏览器的某个坐标位置,默认参考点是浏览器,要注意将元素设置为固定定位后不再是块级显示模式,不会继承父元素的宽度,所以要明确设置好宽度。

  • 相关阅读:
    楔入式侧链原理
    侧链带来的问题
    侧链的应用方向
    node.js 读取yaml文件
    用Visual Studio Code写Node.js
    Express中server和路由分离
    Nodejs开发框架Express4.x开发手记
    node.js express使用websocket
    Nodejs 发送HTTP POST请求实例
    rabbitMQ消息队列原理
  • 原文地址:https://www.cnblogs.com/NIFS/p/12625835.html
Copyright © 2011-2022 走看看