CODEWITHSUNDEEP
css
user2024080
user2024080

Reputation: 5101

Z-index not works as per expected between absolute and relative elements

I am trying to keep red line behind the letters. but not works. added more different z-index values. still not works. here the line positioned as absolute, and letter are in relative.

Is there any way to handle this?

.parent{
  display:flex;
  position:relative;
}

div.line{
  position:absolute;
  width:100%;
  border-top:1px solid red;
  top:10px;
  z-index:1;
}

.wrap{
  display:flex;
  background:green;
  width:100%;
}

.wrap > div {
  flex:1;
  z-index:50;
  position:relative;
}
<div class="parent">
  <div class="line"></div>
  <div class="wrap">
    <div>1111111</div>
    <div>22222222</div>
    <div>33333333</div>
  </div>
</div>

Upvotes: 1

Views: 47

Answers (3)

Pranav Rustagi
Pranav Rustagi

Reputation: 2731

You can do that like this :

.parent {
  display: flex;
  position: relative;
  align-items: center;
  background: green;
}

.parent .line {
  position: absolute;
  width: 100%;
  border-top: 1px solid red;
}

.wrap {
  display: flex;
  width: 100%;
}

.wrap>div {
  flex: 1;
  z-index: 5;
}

.wrap>div span{
  background: green;
  padding: 0 5px;
}
<div class="parent">
  <div class="line"></div>
  <div class="wrap">
    <div><span>1111111</span></div>
    <div><span>22222222</span></div>
    <div><span>33333333</span></div>
  </div>
</div>

Upvotes: 1

Rayees AC
Rayees AC

Reputation: 4659

Adding border to pseudo element

.parent{
  display:flex;
  position:relative;
}
.wrap{
  display:flex;
  background:green;
  width:100%;
  padding:10px;
}

.wrap > div {
  flex:1;
  z-index:50;
  position:relative;
}
.wrap > div:after{
    height: 3px;
    display: block;
    width: 100px;
    width:95%;
    margin-right:5%;
    background: #fff;
    border-right: 3px #fff;
    content: '';
}
<div class="parent">
  <div class="wrap">
    <div>1111111</div>
  <div>22222222</div>
  <div>33333333</div>
  </div>
</div>

Upvotes: 0

Jerry
Jerry

Reputation: 406

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Text underline</title>
   </head>

   <body>
      <h1>Heading</h1>
      <p style="text-decoration: underline;">This text will be underlined.</p>
   </body>
</html>

You could try this piece of code which has inline css at the most basic level .

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

Upvotes: 0

Related Questions