Make block element overlap absolutely positioned element

Question

I was wondering how i can achieve the following:

I have two divs. One is positioned absolutely, while the other is a simple block element. I need the block element to actually overlap the absolutely positioned container.

Here's a picture of what i need to do: The red box is positioned absolutely, the blue box is a normal block element (inside a flexbox, but i don't think that changes anything, correct me if im wrong)

I've tried achieving this with z-index, but it doesn't seem to work.

Thanks

Edit: Here's a fiddle to show more or less my code.

https://jsfiddle.net/xzp284vn/

<div class="container">
  <div class="block">
  </div>
  <div class="absolute">
  </div>
</div>

.container {
  display: flex;
  justify-content: flex-end;
  position: relative;
  width: 400px;
  height: 300px;
}

.block {
  border: 1px solid blue;
     width: 40px;
  height: 300px;
}

.absolute {
  border: 1px solid red;
  position: absolute;
  top: 0;
  left: 0;
   width: 400px;
  height: 40px;
  background: yellow;
}

We need to see your code to help. But most likely your z-index didn't work because the blue element did not have a `position` property applied to it. — TylerH, Nov 13 '20 at 16:02

score 0 · Answer 1 · answered Nov 13 '20 at 16:11

0

.red{
  height:100px;
  border: 1px solid red;
}
.blue{
  border: 1px solid blue;
  width: 150px;
  position: absolute;
  right:30px;
  top:9px;
  height:300px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div class="red">
  
  </div>
  <div class="blue">
    
  </div>
  
</body>
</html>

This is what you are looking for..

answered Nov 13 '20 at 16:11

Pawan Deore

162
3
10

The red block has to be absolutely positioned, and the blue block has to be normally/relative positioned – sejay44069 Nov 13 '20 at 16:13

Make block element overlap absolutely positioned element

1 Answers1