How to make the element level highest in css

WBOY
Release: 2021-12-08 09:21:23
Original
12388 people have browsed it

In CSS, you can use the "z-index" attribute to make the element the highest level. The function of this attribute is to set the stacking order of the element. Elements with a higher stacking order will always be in a lower stacking order. in front of the element, that is, the element has the highest level, and the syntax is "element {z-index:number;}".

How to make the element level highest in css

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to make the element level highest in css

Control the element at the top level, which can be set through the z-index attribute in css. Let's take a three-layer div as an example to explain how CSS style controls the div to the top level.

1. Create a new html file, named test.html, which is used to explain how css style controls div to the top level. Use css to set the width of all divs on the page to 300px, the height to 300px, and the position of the divs to absolute positioning.

Create three divs and identify them with text, namely the bottom div, the middle div, and the top div. Set the class attributes to one, two, and three for the three divs respectively, which will be used to style the class names below.

Set the div style with the class name one, set its background color to red, the distance from the left edge of the page to 0, the distance from the top edge of the page to 0, and use z-index to set its level to 1.

How to make the element level highest in css

2. In the css tag, set the div style with the class name two, set its background color to yellow, 50px from the left edge of the page, and 50px from the top edge of the page 50px, and use z-index to set its level to 2, which is above the div with the class name one.

Set the div style with the class name three, set its background color to pink, 100px from the left edge of the page, 100px from the top edge of the page, and use z-index to set its level to 3, that is, at The topmost of the three divs on the page.

How to make the element level highest in css

Open the test.html file in the browser to view the achieved hierarchical effect.

How to make the element level highest in css

Summary:

1. Create three divs and set their position attributes to absolute positioning.

2. Use z-index to set the hierarchical relationship of the three divs respectively. The larger the number, the higher it is.

(Learning video sharing: css video tutorial)

The above is the detailed content of How to make the element level highest 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