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

  • 相关阅读:
    SSAS维度成员中的非法XML字符[转]
    Java 的sun.jdbc.odbc桥连接的使用!
    SSAS全半角空格导致的AS处理错误[转]
    【原创】C# 如何自定义代码模版
    TO_DATE函数
    JDK Windows环境变量配置
    SSAS异常字符导致找不到属性键错误[转]
    SQL SERVER 数据库日期算法总结
    章节 2.1 可靠的软件 – 灵活,可靠的软件 使用设计模式和敏捷开发
    软件架构设计和Scrum潜在可交付产品,我(scrum master)和他(架构师)的讨论
  • 原文地址:https://www.cnblogs.com/NIFS/p/12625835.html
Copyright © 2011-2022 走看看