Why didn't block with z - index, please have a look at, how to adjust the HTML code, thank you.-CodePudding

As shown in the figure below, could you tell me want to turn on the right side of figure in red block 3 to yellow block above the 2 z - why not index, please have a look at, HTML code, how to adjust, thank you,

5. The HTML code below

<style type="text/CSS" & gt;
# the big - box {width: 500 px; Height: 800 px; Border: 1 px solid # 8 a2be2; }
# a1 {width: 100 px; height: 100px; Background: aqua; }
# a2 {width: 200 px; height: 200px; Background: yellow; }
# a3 {width: 100 px; height: 100px; background:red; }
# a4 {width: 50 px; Height: 50 px; Background: pink; }
A5 # {width: 300 px; height: 300px; Background: Peru; }

</style>

<body>

4. The HTML code is as follows:

<style type="text/CSS" & gt;
# the big - box {width: 500 px; Height: 800 px; Border: 1 px solid # 8 a2be2; }
# a1 {width: 100 px; height: 100px; Background: aqua; }
# a2 {width: 200 px; height: 200px; Background: yellow; position:relative; float: left; Z - index: 1; }
# a3 {width: 100 px; height: 100px; background:red; Z - index: 4; }
# a4 {width: 50 px; Height: 50 px; Background: pink; position:relative; float: left; }
A5 # {width: 300 px; height: 300px; Background: Peru; }

</style>

<body>

CodePudding user response:

Have to do is add a relative positioning

CodePudding user response:

Z - the index and the position is enabled, where there is z index - add a position: relative

Page link：https//www.codepudding.com/frontend/106864.html

Prev:The bosses know DateTimePicker components by clicking on the inside to choose time to zero point of

Next:Dear bosses, js how to calculate the maximum of six product of dynamic data

Tags：

JavaScript

Links：
CodePudding