About the relative feature in CSS

一个新手
Release: 2017-10-20 09:31:06
Original
1971 people have browsed it

Let’s talk about its own characteristics:

  1. ## The positioning of left, right, top and bottom are all relative to their own position Positioning

  2. When left and right exist at the same time, left will take effect

  3. When top and bottom exist at the same time The existence of top takes effect

  4. No intrusion, retains the original position, and will not affect the layout of other elements

  5. Can be used in "Custom Drag and Drop"

Understand the relationship between relative and absoulte:

  1. relative elements will restrict the left, right, top, and bottom positioning of internal absolute elements

  2. ##relative elements will restrict internal The z-index level of the absoulte element

  3. relative element will limit the inner absoulte element that can be set by the overflow element

Understand the relationship between relative and fixed :

    ##The relative element will limit the z-index level of the internal fixed element
Understand the relationship between relative and z-index

:

    Settings Relative elements will increase the cascading context
  1. When z-index is auto relative elements, the hierarchy of internal absoulte elements will not be restricted
  2. When z-index is a numerical value, a stacking context will be created, so that the stacked numerical size of the two relative elements is compared, rather than the comparison of internal elements.
Usage Note

:

    Try to avoid using the relative attribute
  1. If used, try to narrow the control area to only include the internal elements to be restricted

The above is the detailed content of About the relative feature in CSS. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template