Set the position attribute of the element to relative, and its layout is the same as the static element. The rendered box then moves vertically based on the top or bottom attributes, and/or horizontally based on the left or right attributes. The top, right, bottom, left and left: 20px properties are used to specify the distance the box moves after rendering. A positive value indicates that the box will move away from that position and in the opposite direction. For example, right: -20px move the box to the right by 20 pixels. Applying a negative value to the opposite direction will achieve the same effect: left: 20px will have the same effect as auto. The initial value of these properties is left, which makes the calculated value 0 (zero) - that is, no movement occurs. Obviously, it doesn't make sense to specify right and left for the same element, because the position will be overconstrained. If the content direction is from left to right, the right value is used and the right will be ignored. In the right to left direction, the top value "wins". If both bottom and top are specified, bottom is used, and
Control contains block
positionOne side effect of relative positioning is very convenient: the relative positioning element is "localized", which means it becomes a block of inclusion for any absolute positioning descendants. This gives us an easy-to-use tool to control where the block is included: just set relative to
FAQ on relative positioning of CSS
positionIn CSS, the position attribute is used to specify the element's positioning method type. There are five different values of static: relative, fixed, absolute, sticky,
. Relative positioning and absolute positioning are the two most commonly used methods. top
rightRelative positioning refers to the positioning of an element relative to its normal position. This means setting the bottom, left,
properties causes the element to move from its normal position. However, other elements will not adjust to fit the gaps left by the elements.
On the other hand, absolute positioning allows elements to be positioned relative to the nearest positioned ancestor. If an absolutely positioned element has no positioned ancestor, it will use the document body and move as the page scrolls. attribute in the z-indexCSS controls the vertical stacking order of overlapping elements. Therefore, it can be used with relative positioning to control the display order of overlapping elements. The z-index attribute is only applicable to positioned elements (position: absolute, position: relative, position: fixed or position: sticky).
Elements with higher z-index values will be displayed before elements with lower z-index values. If z-index is not specified, the elements are stacked in the order they appear in the HTML document.
Yes, you can use percentage values as top, right, bottom, and left properties in relative positioning. When you use a percentage value, it is relative to the size of the element containing the block. For example, if you set top: 50%, it will move the element downwards half of its containing block height.
If you specify only one direction (for example top or left) for relative positioning, the element will move from that direction according to the specified value. The other side (right or bottom) will not be affected and the element will not move from that side.
Yes, you can use relative positioning with display: flex or display: grid. The position attribute is independent of the display attribute, so you can use any positioning method with any display type. However, remember that some combinations may not get the expected results due to the way these properties interact.
Relative positioning does not remove elements from normal document streams. Instead, it changes the position of the element without changing the surrounding layout. This means that the space of the element remains in the layout as if it was in its normal position.
Yes, you can use negative values as top, right, bottom, and left properties in relative positioning. A negative value will move the element in the opposite direction. For example, if you set top: -20px, it will move the element up by 20 pixels.
Relative positioning in CSS is used when you want to adjust the position of the element without affecting the layout of other elements. It is also useful when you want to create context for absolutely positioned child elements.
margin, padding and border properties affect the size of the element and the surrounding space. These properties work the same way as relative positioning works in the same way as normal processes. Relatively positioned top, right, bottom, and left properties will move elements from their normal position, but they will not affect the size of the element or the space around them.
Yes, you can use CSS transitions or animations to animate the top, right, bottom, and left properties of relative positioning elements. This can create various effects, such as elements sliding in from outside the screen or moving on the page.
The above is the detailed content of Relative Positioning. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
