How to force positioning of a div to overlap with twitter bootstrap?
Stack Overflow Asked by Jake Rankin on December 3, 2021
I’m trying to use Bootstrap 4.5 to have a div positioned over two existing divs. Rather than trying to describe it with text, this picture illustrates what I am trying to achieve:
The navy and pink are two columns, and the white is outside of both of them.
My attempts to recreate something similar have not been succusfull. My current attempt is thus:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="row pb-3" style="height: 520px;">
<div class="p-3" style="float:left; background:red; height:220px; width:200px; z-index: 2;"> </div>
<div class="col-md-3" style="background:blue;"> </div>
<div class="col-md-9" style="background:pink;"> </div>
</div>
</body>
</html>Obviously this approach is not working. I’m not sure why it is not. What is the right approach to implement something like in the picture?
One Answer
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="row pb-3" style="height: 520px; position: relative">
<div class="p-3" style="position:absolute; top: 100px; background:red; height:200px; width:200px; z-index: 2;"> </div>
<div class="col-md-3" style="background:blue;"> </div>
<div class="col-md-9" style="background:pink;"> </div>
</div>
</body>
</html>
Note that the absolutely positioned div will cover the content in the others. Generally speaking by the way, float is nasty and to be avoided now that we have flex and grid and so on. It may be necessary if you need the content to flow around something, but usually it can and should be avoided.
Answered by see sharper on December 3, 2021
Add your own answers!
Ask a Question
Get help from others!
Recent Answers
- Jon Church on Why fry rice before boiling?
- Peter Machado on Why fry rice before boiling?
- Joshua Engel on Why fry rice before boiling?
- haakon.io on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?