Reference method and application method of absolute positioning

Reference method and application of absolute positioning

Absolute positioning (Absolute Positioning) is a commonly used layout method in CSS. By specifying an element relative to its nearest non- Static (default positioning method) is positioned at the position of the parent element or document. Using absolute positioning, elements can be placed at any location without being affected by other elements, providing a more flexible layout.

Reference method of absolute positioning
In CSS, absolutely positioned elements have the following characteristics:

1. Absolutely positioned elements are specified through the top, right, bottom, and left attributes. s position.
2. The position of an absolutely positioned element is relative to its nearest non-statically positioned parent element or document.
3. If no non-statically positioned parent element is found, the position of the absolutely positioned element is relative to the position of the document.

Application scenarios of absolute positioning

1. Precise layout: Absolute positioning can separate elements from the document flow and achieve precise layout effects. For example, we can use absolute positioning to implement elements such as navigation bars and floating advertisements in web pages that need to be fixed in a certain position and not scroll with the page.
2. Picture album: Using absolute positioning, we can achieve the layout effect in the picture album. Each picture element can be positioned by setting the position attribute to achieve the effect of free placement.
3. Modal box: Absolute positioning can be used to implement a modal box. By setting the position attribute of the modal box to center, it will always be in the center of the page and remain fixed no matter how the scroll bar scrolls. Location.
4. Suspended prompt box: When an element needs to be suspended, a prompt box will pop up, which can be achieved by using absolute positioning. By setting the position property of the prompt box, position it relative to the floating element and display it.

Code examples for absolute positioning
The following are code examples for absolute positioning in several common application scenarios:

1. Navigation bar layout

HTML：

<nav class="navbar">
  <ul class="navbar-list">
    <li>首页</li>
    <li>关于我们</li>
    <li>产品服务</li>
    <li>联系我们</li>
  </ul>
</nav>

CSS：

.navbar {
  position: absolute;
  top: 20px;
  left: 20px;
}

.navbar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar-list li {
  display: inline-block;
  margin-right: 10px;
}

2. Picture Album Layout

HTML：

<div class="photo-gallery">
  <img  class="photo lazy"  src="/static/imghwm/default1.png"  data-src="photo1.jpg"    style="max-width:90%" alt="Reference method and application method of absolute positioning" >
  <img  class="photo lazy"  src="/static/imghwm/default1.png"  data-src="photo2.jpg"    style="max-width:90%" alt="Reference method and application method of absolute positioning" >
  <img  class="photo lazy"  src="/static/imghwm/default1.png"  data-src="photo3.jpg"    style="max-width:90%" alt="Reference method and application method of absolute positioning" >
  <img  class="photo lazy"  src="/static/imghwm/default1.png"  data-src="photo4.jpg"    style="max-width:90%" alt="Reference method and application method of absolute positioning" >
</div>

CSS：

.photo-gallery {
  position: relative;
  width: 500px;
  height: 500px;
}

.photo {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}

Absolute positioning is a commonly used layout method in CSS and is suitable for many scenarios. By setting relative position attributes, elements can be freely placed on the page to achieve precise layout effects. In actual development, we can reasonably use absolute positioning to achieve various layout effects of web pages according to specific needs.

The above is the detailed content of Reference method and application method of absolute positioning. For more information, please follow other related articles on the PHP Chinese website!