Master the common attribute values ​​​​of absolute positioning and let your page elements be placed as you like

Master the common attribute values ​​​​of absolute positioning and let your page elements be placed as you like. Specific code examples are needed

Absolute positioning (absolute positioning) is commonly used in CSS One of the positioning methods that allows us to position an element relative to its nearest parent element with a positioning attribute. By mastering the common attribute values ​​of absolute positioning, we can easily control the position and layout of page elements.

1. Basic concepts of positioning elements

Before using absolute positioning, we need to understand some basic concepts. The parent element refers to the ancestor element with positioning attributes, and the child element refers to the element that needs to be positioned. When using absolute positioning, we can adjust the position of child elements by setting attribute values ​​such as top, bottom, left, and right.

2. Common attribute values ​​of absolute positioning

In absolute positioning, we often use the following attribute values ​​to control the position and layout of elements:

(1) top attribute

By setting the top attribute value, we can specify the distance between the child element and the top of the parent element. The sample code is as follows:

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    top: 50px;   /* 子元素距离父元素顶部的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(2) bottom attribute

By setting the bottom attribute value, we can specify the distance between the child element and the bottom of the parent element. The sample code is as follows:

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    bottom: 50px;   /* 子元素距离父元素底部的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(3) left attribute

By setting the left attribute value, we can specify the distance between the child element and the left side of the parent element. The sample code is as follows:

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    left: 50px;   /* 子元素距离父元素左侧的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(4) right attribute

By setting the right attribute value, we can specify the distance between the child element and the right side of the parent element. The sample code is as follows:

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    right: 50px;   /* 子元素距离父元素右侧的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

3. Notes

When using absolute positioning, we need to pay attention to the following points:

(1) The parent element needs to set the positioning attribute

If the parent element does not set the positioning attribute (position: relative/absolute/fixed), the child element cannot be positioned through the top, bottom, left, and right attributes.

(2) The width and height of the child element are set relative to the parent element

In absolute positioning, the width and height of the child element are usually set relative to the parent element. Of course, we can also use percentages to set the width and height and adapt them according to the size of the parent element.

(3) Overlap of element positions

When using absolute positioning, if the positions of sub-elements overlap, the later sub-elements will cover the earlier sub-elements.

Conclusion

By mastering the common attribute values ​​​​of absolute positioning, we can easily realize the free placement of page elements. However, in actual use, we need to pay attention to reasonably setting the positioning attributes of parent elements and child elements, as well as the overlap of element positions, to ensure the beauty and readability of the page layout.

The above is an introduction to the common attribute values ​​​​of mastering absolute positioning. I hope it will be helpful to everyone. I believe that the code written in practice will help you better understand and master these attribute values, so that your page elements can be placed as you wish.

The above is the detailed content of Master the common attribute values ​​​​of absolute positioning and let your page elements be placed as you like. For more information, please follow other related articles on the PHP Chinese website!