zoukankan      html  css  js  c++  java
  • 网页布局05 网页元素定位

    网页元素定位涉及到两个css属性:position和z-index属性。

    position属性

    position的属性值如下:

    position的属性值说明如下:

    static:没有定位,网页元素以标准文档流方式显示。

    relative:设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置。设置相对定位的盒子仍在标准流中,它对父级盒子和相邻的盒子都没有任何影响。设置了position属性值为relative的网页元素,无论是在标准流中还是在浮动流中,都不会对它的父级元素和相邻元素有任何影响,它只针对自身原来的位置进行偏移。

    absolute:绝对定位。偏移设置通过下列属性: left、right、top、bottom。使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响。

    fix定位:固定定位,定位的基准为浏览器。

    z-index属性

    作用:当网页元素设置了positon属性时,网页元素发生重叠,z-index可以调整元素重叠的上下位置。 z-index属性值为整数,默认值为0,z-index值大的网页元素位于相比其其值小网页元素上方。

    如下图所示:

     

    透明度的设置

    网页元素经过定位后可能发生重叠,如何设置重叠的元素的透明度?

    可以通过两个属性设置:

    opacity:value。value从0.0(完全透明)到1.0(完全不透明)。所有主流浏览器都支持opacity属性。

    filter:alpha(opacity=value)。IE8和早期版本浏览器支持的属性。value值为0(完全透明)到100(完全不透明)。

    如果需要考虑兼容性,可以在css中同时写上opacity属性和filter属性。

  • 相关阅读:
    Mysql 权限命令整理大全
    阿里云ECS发送邮件失败
    彻底删除Kafka中的topic
    mysql Slave 启动失败
    mysql双主热备
    mysql 主从笔记
    mysql主从同步的键值冲突问题的解决方法
    python0.2----如何在windows下搭建最简洁的python环境
    内存0.1---内存里数据的表示形式以及进制转换
    python0.1-----pyhon的优缺点,为何学习python
  • 原文地址:https://www.cnblogs.com/rask/p/10158961.html
Copyright © 2011-2022 走看看