问题总结

杰出的人才从来都是自我驱动型。

要自觉啊!

在此记录遇到的问题和理解,希望能在日后的应用学习和工作中更加透彻的理解。

关于CSS中position定位:


开始学习的时候简单粗暴的总结了

absolute; 绝对定位(相对于浏览器边界),拉动滚动条,位置随之改变。

fixed 固定位置:相对于浏览器窗口,拉动滚动条,位置不变。

relative 相对定位,相对于该元素本该出现的位置:在原本应该出现的位置偏移。

需注意的是,只要加了position,该元素就和其他元素不在同一层了,原本被挤下去下面的元素就会浮上来。当时感觉自己已经懂了,后来又看到了上图,感觉关于定位已经明白的差不多了,并没有发现自己的两次理解相对矛盾。后来,看到了两次理解本身就具有矛盾,又回去看了一下并进行了实验,查资料,发现:

position:relative | absolute | static | fixed
    static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
    relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
    absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
    fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

CSS中定位的层叠分级:z-index: auto | namber;

总结:

absolute; 绝对定位(相对于浏览器边界)

选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。简单来说,如果div中没有设置定位,他里面再套一个div设置绝对定位,里面的div不会出现在外面div里面。如果两个div都设置absolute,里面的div就是相对外div来进行定位的。

现在的理解可能还是错误的,毕竟没有经过大量的应用来体会,附上一个链接:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html

希望经过大量的理解应用之后能更加透彻的明白。

CSS选择器的两种理解方式:

最初接触到css,对选择器是这样理解的:

设置一个id或者类,然后再元素中引用或者应用这个id或者类。

后来又有了这样一种理解:

给元素添加一个id或者类,然后设置这个id或者类的样式。

原文地址:https://www.cnblogs.com/jiangwz/p/6991424.html