Bootstrap container with position:absolute loses layout inside
If you want to set the position to absolute and want it to have 100% width, you should set the left and right CSS styles:
HTML:
<div class="container first">
<div class="row">
<div class="col-xs-12">
<p>Content here</p>
</div>
</div>
</div>
<div class="ontop container">
<div class="row">
<div class="col-xs-4">
<p>Menu Item 1</p>
</div>
<div class="col-xs-4">
<p>Menu Item 2</p>
</div>
<div class="col-xs-4">
<p>Menu Item 2</p>
</div>
</div>
</div>
CSS:
body {
margin: 10px;
}
.first {
height: 200px;
background-color: #ddd;
}
.ontop {
height: 100px;
background-color: #d00;
position: absolute;
top: 100px;
right: 0;
left: 0;
}
Change left: 0 and right: 0 to 10px if you want it to have the same margin as the first container.
An element which is positioned absolute does not obtain any space in the document. This means that it does not leave an empty space after being positioned. You can subsequently use the properties left, right, top, and bottom to place the box.
http://html.net/tutorials/css/lesson14.php#s2
Bootstrap container fluid elements loses layout inside drop down menu with position absolute
You need to write media query to handle it or add a extra class to dropdown as I did.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.col-lg-3 {
flex: 0 0 auto;
max-width: 18%;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
right:0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
.flex-1{
flex:1;
width: 100%;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto flex-1">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown flex-1">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-3 ">
<ul class="list-unstyled">
<li class="nav-item"> <a class="nav-link" href="#">One Page</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Portfolio</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Construction</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Business</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Landing page</a></li>
</ul>
</div>
<div class="col-lg-3 ">
<ul class="list-unstyled">
<li class="nav-item"> <a class="nav-link" href="#">Personal</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Transportation</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Education</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Corperate</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Resume</a></li>
</ul>
</div>
<div class="col-lg-3 ">
<ul class="list-unstyled">
<li class="nav-item"> <a class="nav-link" href="#">Health</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Admin</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Agency</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Real Estate</a></li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li class="nav-item"> <a class="nav-link" href="#">Movies</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Sport & Entertainement</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Nature</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Photography</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Resaurant</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Medical</a></li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li class="nav-item"> <a class="nav-link" href="#">Movies</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Sport & Entertainement</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Nature</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Photography</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Resaurant</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Medical</a></li>
</ul>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>How can I prevent absolute position from overlapping while using bootstrap?
The two .elements need to be display:block and have a specified width/height in order to float around each other:
have a look a my fiddle here:
https://jsfiddle.net/Lmt1u1uw/7/
This should do the trick.
Using position:absolute changes elements placed in next columns in bootstrap
When you add position:absolute on an object you take it completely out of the normal DOM flow. As a result, anything you place after it will adjust as though the absolutely positioned element does not exist and simply reflow to fill the gap.
To resolve this, YOU SHOULD NEVER put abs pos on the grid elements.
Absolute should be applied to the contents of the grid, not the grid itself. This will prevent your issue from happening.
So, just put whatever you need to remain in position inside of your grid, and then apply the positioning to those elements. The rest of the page will flow as it should.
Alternately, if you set position:relative of the parent, and position:absolute on the child, you can move the child relative to the parent without impacting the rest of your DOM.
Make absolute positioned div expand parent div height
You answered the question yourself:
I know that absolute positioned elements are removed from the flow, thus ignored by other elements.
So you can't set the parents height according to an absolutely positioned element.
You either use fixed heights or you need to involve JavaScript.
Nowadays one might use CSS flexbox or grid layout to reverse the visual order of HTML elements inside a parent container without using position: absolute;. See also Reverse order of columns in CSS Grid Layout
Absolute positioning with Bootstrap
An easy solution would be to only absolutely position one img element.. in this case, .top:
EXAMPLE HERE
.fadehover img.top {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
In doing so, the parent element, .col-md-3.col-sm-3 will no longer collapse upon itself because only one child element is absolutely positioned. In this instance, the other img element will define the dimensions of the parent because it is still in the document flow - unlike the absolutely positioned one.
Remove horizontal scroll in block with position:absolute divs inside
You can add overflow: hidden to .container, but you're going to need to shift your left hand side sidebar to left: 0 and your right hand side sidebar to right: 0 when they're clicked.
Currently, if you open a sidebar the content area shifts only - you need to bring the sidebars in from outside of the container as well.
I've made a Codepen fork for you with a few changes:
http://codepen.io/anon/pen/PPgyPg
Firstly, instead of shifting the content left or right we will apply padding to the left and right sides, as the sidebars are positioned to the edges of the container we would end up with 300px of white space on either side.
Secondly we'll use some event delegation instead of having JS in onclick attributes on your buttons and apply classes to your sidebars to move them in and out:
// When your show content button is clicked
$('#show-content').on('click', function() {
// Remove both left and right classes to reset padding
$('#container').removeClass('container-show-right-sidebar container-show-left-sidebar');
// Remove active classes from both sidebars
$('.right-sidebar, .left-sidebar').removeClass('active');
});
// When your left sidebar button is clicked
$('#show-left-sidebar').on('click', function() {
// Remove the right sidebar class if it's applied and add the left sidebar classs
$('#container')
.addClass('container-show-left-sidebar')
.removeClass('container-show-right-sidebar');
// Remove active class from right sidebar
$('.right-sidebar').removeClass('active');
// Add active class to left sidebar
$('.left-sidebar').addClass('active');
});
// When your rightsidebar button is clicked
$('#show-right-sidebar').on('click', function() {
// Remove the leftsidebar class if it's applied and add the rightsidebar class
$('#container')
.removeClass('container-show-left-sidebar')
.addClass('container-show-right-sidebar');
// Add active class to right sidebar
$('.right-sidebar').addClass('active');
// Remove active class from left sidebar
$('.left-sidebar').removeClass('active');
});
Related Topics
How to Make Custom Scrollbars Show in All Browsers
Stretch List Items <Li> to Fill The Width of <Ul>
CSS Body Background Image Fixed to Full Screen Even When Zooming In/Out
Styling Overlapping Annotations in Text with HTML <Span> Tags and CSS
How to Break Long Words in a Table Td
How to Horizontally Center an Item in Mui Grid Item
CSS Gradients in Ie7 & Ie8 Is Causing Text to Become Aliased
CSS Inverted Triangle Image Overlay
How to Select Multiple Input Field Types with CSS
Angular: Updating Scope on Hover
When Using CSS Scale in Firefox, Element Keeps Original Position
Twitter-Bootstrap-Rails on Heroku: Glyphicons Displayed as Squares