• Web之路笔记之二


    CSS中控制各个Block element的位置方式之一,tag为position,有4种属性。

    1. static

      一般网页默认的属性,表示element根据页面正常流(normal flow)进行排列,也就是默认的摆放方式,所以一般不会在CSS文件内编写。

    2. absolute

      表示element从页面正常流中去除,本该所属的地方不会保留位置,并且相对于距离它最近的父元素(parent element)进行移动。比如说在body内的一个div设为absolute,那么移动的时候就是相对于body这个block进行移动;如果没有父元素,则根据html元素进行移动。

    3. fixed

      表示element从页面正常流中去除,本该所处的地方不会保留位置,并且相对于浏览器等视窗进行移动。需要注意的是,该元素不会因为页面滚动而移动,也就是对一个fixed的元素,无论你如何滑动滚轮,它不会从一开始看到他时候的地方移动一步。使用较少,本来以为可以用于固定背景图片,但是因为背景图片是在body元素下设置的,所以没办法单独对背景图片进行设置为fixed。

    4. relative

      此处说的relative相关,是与该element原来在页面正常流中本该所属的位置的相关,也就是说,如果只设置了position: relative而不对element的top等进行设置的话, 显示的效果和默认的static没有区别。另外,设置完四周参数之后的效果,尽管移动了位置,但是原本本该所属的地方仍然会留出空白,也就是说他仍然存在于页面正常流中。

      需要注意的是,相关的element无论如何设置z-index也不能够置于static element之上;另外一点是limits the scope of absolutely positioned child elements,这句话仍需要继续理解。


      另外,移出页面正常流fixed和absolute的element会覆盖其他positioned element,不希望覆盖的时候,使用z-index属性可以修改。

      z-index性质是决定了一个element在栈内的顺序,越大的在上层。当两个element覆盖在同一个地方,在html越靠后的越先显示。需要注意的是,z-index只对除static以外的element起作用!也就是说如果和(默认)static元素相比,永远是static在上而且不能用z-index改变显示顺序。

    参考:https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

       http://www.w3schools.com/cssref/pr_pos_z-index.asp

       http://www.w3schools.com/css/css_positioning.asp

  • 相关阅读:
    JavaScript 内置函数有什么?
    cursor(鼠标手型)属性
    用CSS制作箭头的方法
    CSS 的伪元素是什么?
    用CSS创建分页的实例
    CSS 按钮
    网页布局中高度塌陷的解决方法
    CSS 进度条
    DOM导航与DOM事件
    DOM 修改与DOM元素
  • 原文地址:https://www.cnblogs.com/muluo0107/p/4355699.html
Copyright © 2020-2023  润新知