Practical skills and experience sharing of CSS Positions layout

Practical skills and experience sharing of CSS Positions layout

CSS layout is one of the essential skills for front-end engineers, among which the position attribute is an important tool to achieve complex layout. In this article, I will share some practical tips and experiences with CSS Positions layout and provide specific code examples.

1. Introduction to position attribute
In CSS, the position attribute is used to specify the positioning method of elements. Common values ​​are: static, relative, absolute and fixed.

1. static: Static positioning, the default positioning method, elements will be laid out in the normal document flow.
2. relative: relative positioning, the element will be positioned relative to its normal position and can be adjusted according to the top, bottom, left and right attributes.
3. Absolute: Absolute positioning. The element will be positioned relative to the nearest ancestor element that has the position attribute set. If not, it will be positioned relative to the entire page.
4. fixed: Fixed positioning, the element will be positioned relative to the browser window, no matter how the scroll bar moves, the element will always be in a fixed position relative to the viewport.

2. Practical skills and experience sharing

1. Use a combination of relative and absolute to achieve centered positioning
   Sometimes we need to center an element, you can Set the position of its parent element to relative, then set the position of the element to be centered to absolute, and then use the top, bottom, left and right attributes to adjust the center. For example:

<div class="container">
  <div class="centered-element">我是居中的元素</div>
</div>

.container {
  position: relative;
}

.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. Use fixed to achieve the effect of floating navigation bar
   Fixed navigation bar is one of the common layout requirements of web pages. You can use fixed positioning to implement a navigation bar that floats above the page. For example:

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

.fixed-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

.fixed-navbar ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.fixed-navbar ul li {
  margin: 0 20px;
}

3. Use relative and absolute to implement waterfall flow layout
   Waterfall flow layout is a common way of displaying images, which can be achieved by combining relative and absolute. For example:

<div class="waterfall-layout">
  <img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy" alt="图片1">
  <img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy" alt="图片2">
  <img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy" alt="图片3">
  <img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy" alt="图片4">
  <img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy" alt="图片5">
</div>

.waterfall-layout {
  position: relative;
  column-count: 3;
  column-gap: 10px;
}

.waterfall-layout img {
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 10px;
}

.waterfall-layout img:nth-child(odd) {
  position: absolute;
  left: 0;
  margin-bottom: 0;
}

.waterfall-layout img:nth-child(even) {
  position: absolute;
  right: 0;
  margin-bottom: 0;
}

The above are some practical skills and experience sharing of CSS Positions layout. I hope it will be helpful to your actual project. When using the position attribute, please choose an appropriate value according to the specific situation and adjust it in combination with other attributes. By using CSS layout flexibly, you will be able to create unique web pages.

The above is the detailed content of Practical skills and experience sharing of CSS Positions layout. For more information, please follow other related articles on the PHP Chinese website!