Home > Developer > JavaScript
CSS learning notes -- learning to locate the position attribute and learning notes position
One of the remaining questions before learning today is the position attribute of CSS. First, problems related to position are summarized:
The first question: Which of the following attributes does position have?
For the position attribute, there are a total of five values, which are
The most standard answer is generally found on W3cSchool. The interpretation of these five attributes is very detailed. In fact, we often use three attributes: relative, absolute, and fixed in development. In addition, when adding an element to this attribute, we also need to set the left/top/right/bottom and z-index of the element as needed,The position of an element is specified by the "left", "top", "right", and "bottom" attributes. The display level is controlled by z-index.
The second question: which attribute values are commonly used in position? What are their respective features?
We have mentioned three common attribute values:Relative, absolute, and fixed.
Relative: After the position attribute of an element is set to relative, this element willRefer to your previous location, Move according to the set left equivalence. The following is a chestnut ~
<!DOCTYPE html>Code effects include:
The second div is moved according to its previous position,And its previous position is not occupied by the following elements.. The red div is covered by a yellow div because of the effect of z-index.
Absolute: locates the first parent element other than the position attribute for static positioning. Here we need to analyze this sentence in detail:First, we can determine that the object referenced by the absolute positioning is the parent element with the positioning attribute. Then, the position attribute of the parent element cannot be static.
Here, I want to make it more detailed: What if an element does not have a parent element with the position attribute? I checked the information here to confirmIn this case, it locates Based on the (Note:
Change the position attribute of div2 to absolute to view the effect:
In this way, we can find that the position before moving the red div is yellow,In this case, the red div is out of the Document Stream.
The last property value: fixed. Its effect is similar to that of absolute, and it is absolutely positioned,But its reference is a fixed browser window.. After the position attribute of div2 is changed to fixed, you can scroll the mouse to view the effect. With this feature, we can make small advertisements (similar to side floating windows) on some websites) such effect.
In fact, when I learned position, I felt that mastering the element's reference object is the key to understanding the position attribute, determining the reference object, and then determining the status of the subsequent element based on the attribute value type, you can determine the position of the element ~
PS: through these days, I have learned a lot from my own questions and solutions. In fact, there are still a lot of details ignored during the course of study. After such a process, my basic knowledge is quite solid ~ In addition, I also found that using blogs to share knowledge is a happy process. It can also improve programming technology and expression ability, and may also help others, so we must stick to it !! (Operator _ operator )#
January 11, 2016
A thousand miles away
PS: most of the information I read comes from the Internet. If there is any infringement, please contact me to delete it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
