腾讯体育官网

書名： Professional CSS3
作者名： Piotr Sikora
本章字數： 792字
更新時間： 2021-07-02 16:39:40

CSS elements positioning

Understanding of positions in CSS is one of the key skills of frontend developers. It helps you to change the behavior of each element on a web page. Additionally, with a mix of positions, you can change the behavior of the inner (child) elements.

Static, relative, absolute, fixed – differences

The position static is a default value of the position, which includes every element on a web page.

The position relative is making an element relative to itself. You can easily understand it with the following code:

<p>
    Lorem
    <span> ipsum</span>
</p>

And create the SASS:

span
  position: relative
  top: -10px

What you should see before appending the styles is as shown in the following:

Static, relative, absolute, fixed – differences

In addition, after appending the styles you will see the following:

As you can see, when we change the position to relative and move it with property top, left, right, or bottom, we will move the element from its current position.

Additionally, relatively positioned elements can be set as a scope for inner elements with the position absolute, for example, HTML:

<div class="relative">
    <div class="absolute"></div>
</div>

SASS:

.relative
  width: 200px
  height: 200px
  background: orange
  position: relative

.absolute
  width: 40px
  height: 40px
  background: red
  position: absolute
  left: 100px
  top: 30px

The effect in the browser is as shown in the following:

The orange box is a .relative element. The smaller box is absolutely positioned and related with the relative element.

The position absolute can be used as in the preceding example. But what will happen when there isn't a parent relative element? Absolutely positioned elements will be related with HTML DOM elements.

Fixed elements are strictly fixed to the browser. So when you apply position: fixed to any element and give it top: 0 and left: 0, this element will be stuck to the top-left corner of the browser. Even when the scroll action is done, the element won't change its position related to the browser.

The following code will show you how fixed elements are behaving.

HTML:

<body>
<div class="fixed">
    position: fixed
</div>

<ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
</ul>
</body>

SASS:

body
  padding-top: 100px
  background: red

.fixed
  position: fixed
  text-align: center
  top: 0
  left: 0
  height: 100px
  width: 100%
  background: blue

ul
  height: 2000px

As you can see in the preceding code, the body element has padding-top, which is equal to the height of the .fixed element. This is caused by the fixed element that normally when you remove the padding fixed element will be over the body content (it will cover this element). The following screenshot shows the browser before the scroll action and the next screenshot shows the browser after the scroll action. Both screenshots contain the border of the browser to show the proper scroll action.

Important properties, which you can add to elements with positions, relative/fixed/absolute, are as follows:

Left
Right
Top
Bottom
Z-index

A common problem during the coding of the position is overriding the left value by applying the right value. A sample code is as follows:

.element
  position: absolute
  left: 10px
  right: 20px

The .element will be still stuck to its left position. How do you append it to the right position?

.element
  position: absolute
  left: auto
  right: 20px

Lists with fixed images (on the right or left) and descriptions

This is a pretty common problem relating to lists. Lists of articles with fixed images (with fixed width and height) on the one side and with elastic content on the right could be pretty problematic without the positions relative and absolute. Following is an example.

HTML:

<article>
    <div class="image">
        <img src="image.jpg"/>
    </div>
    <div class="content">
        <p class="header">Header</p>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    </div>
</article>

SASS:

*
  box-sizing: border-box

article
  position: relative
  padding: 10px
    left: 220px
  height: 220px
  background: red

  .image
    position: absolute
    left: 10px
    top: 10px
    background: #000
    width: 200px
    height: 200px

  .content
    width: 100%

CSS code after compilation:

* {
    box-sizing: border-box;
}

article {
    position: relative;
    padding: 10px;
    padding-left: 220px;
    height: 220px;
    background: red;
}

article .image {
    position: absolute;
    left: 10px;
    top: 10px;
    background: #000;
    width: 200px;
    height: 200px;
}

article .content {
    width: 100%;
}

The effect in the browser is as shown in the following:

Lists with fixed images (on the right or left) and descriptions

The effect after resize of the browser is as shown in the following:

When you want to get the image on the right side, you will need to make the following changes:

article
  position: relative
  padding: 10px
    right: 220px // change here
height: 220px
  background: red


  .image
    position: absolute
    right: 10px // change here
top: 10px
    background: #000
    width: 200px
    height: 200px

Compiled CSS:

* {
    box-sizing: border-box;
}

article {
    position: relative;
    padding: 10px;
    padding-right: 220px;
    height: 220px;
    background: red;
}

article .image {
    position: absolute;
    right: 10px;
    top: 10px;
    background: #000;
    width: 200px;
    height: 200px;
}

The effect in the browser is as shown in the following:

官术网_书友最值得收藏!

Professional CSS3

CSS elements positioning

Static, relative, absolute, fixed – differences

Lists with fixed images (on the right or left) and descriptions