I have a position:fixed div at the top of my page, so that when a user scrolls down the menu always stays at the top.
How do I position another div element underneath the fixed div.
I'm using CSS and HTML.
I'm using a smooth scrolling jQuery and need each section header to appear just under the menu bar.
Something like this — http://codepen.io/sergdenisov/pen/pJyMGb:
HMTL:
<div class="menu">
<div class="menu-item">Home</div>
<div class="menu-item">About</div>
<div class="menu-item">Demo</div>
<div class="menu-item">Contact</div>
</div>
<div class="menu-item menu-item_sub">Contact</div>
CSS:
body {
height: 2000px;
}
.menu {
position: fixed;
background: blue;
width: 100%;
}
.menu-item {
display: inline-block;
padding: 30px;
}
.menu-item_sub {
position: fixed;
left: 0;
top: 60px;
}
Do everything in absolute position domain.
.1(class){
position: absolute;
left: 10px;
top20px;
}
Like above classify each object with a class and set their position.
Related
I want to extend the left side of a navigation menu within a centered container. I tried position: absolute but the menu overlapped the logo,
is there another solution? If not, how can I stop an absolute element overlapping other elements?
Here is an image of what I'm trying to do
extended div
If you want to keep your menu elements inside the container, you can go with an absolute ::before pseudo-element.
section {
max-width: 300px;
margin: 0 auto;
background-color: #eaeaea
}
header {
display: flex;
line-height: 30px;
}
nav {
background-color: rgba(255,0,0,.2);
position: relative;
}
nav::before{
content:'';
position: absolute;
display: block;
width: 100vw;
height: 100%;
right: 100%;
background-color: rgba(255,0,0,.2);
}
<section>
<header>
<nav>navigation menu</nav>
<span>logo</span>
</header>
container
</section>
I am using bootstrap, I wanted one div behind the other div, so used z-index en position: absolute and relative.
When doing this, every div under the div with z-index: 1 goes behind this div, while I want it to stay under it.
The div also becomes wider than the max-width when using 100%
<div class="row" id="MENUROW">
<div class="col-md-12" id="MENUCOLUMN"><h1>SHOP</h1></div>
</div>
<div class="row" id="MAINROW"> <!-- this has the background-image -->
<div class="col-md-12" id="MAINCOLUMN">
</div>
</div>
CSS:
#MENUROW
{
position: relative;
height: 80px;
background-color: transparent;
z-index: 2;
}
#MAINROW
{
position: absolute;
z-index: 1;
top: 60px; /*because there is 1 div above the menu div, this div needs to be just under that div, behind the menu div */
width: 100%;
background-image: url(../images/background.jpg);
background-size: cover;
}
when doing this the background image goes wider (to the right) than the width of the parent div.
https://jsfiddle.net/2cs60vrr/3/ example, just made the background red to show how wide it should be, the background image goes much wider
Point 1
You didn't used .container class in your HTML. Bootstrap has a structure to get it's maximum feature. You must need to use .container. Bootstrap structure is below:
<div class="container">
<div class="row">
<div class="col-*-*">
Your Content
</div>
</div>
</div>
Make your html as above to solve this issue.
Point 2
If you want not change your html, then use this code below to any .row to solve this issue.
margin-left:0;
margin-right:0;
I am sorry if we are unsure what you are looking for but is that what you want?
.grid {
margin: 0 auto;
max-width: 100%;
width: 100%;
background-color: #fff;
}
.row {
width: 100%;
margin-bottom: 0px;
display: flex;
}
#MENUROW {
position: absolute;
height: 80px;
background-color: red;
z-index: 2;
}
#MAINROW {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
max-width: 1400px;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
background-size: cover;
}
https://jsfiddle.net/norcaljohnny/xt9c9d2r/2/
You should put the wrapper around the whole thing to position:relative;
And both rows to position:absolute;
That's it.
When using position:absolute; the block goes to the absolute top left corner of the closest parent html tag that has a position:relative;. If there is no parent with position:relative; your absolute positioned items go to the upper left corner of your screen.
(the first row is not a parent of the second, but they are siblings. The wrapper "grid" is the parent of the 2 rows)
<div class="grid">
<div class="row" id="MENUROW">
<div class="col-md-12" id="MENUCOLUMN">
<h1>SHOP</h1>
</div>
</div>
<div class="row" id="MAINROW">
<div class="col-md-12" id="MAINCOLUMN">
text
</div>
</div>
</div>
And CSS
.grid {
position: relative;
}
.row {
width: 100%;
}
#MENUROW {
position: absolute;
background-color: red;
z-index: 1;
}
#MAINROW {
position: absolute;
z-index: 2;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
background-size: cover;
}
Here is your updated example:
https://jsfiddle.net/2cs60vrr/6/
I am trying to position 2 divs within 1 div inside a bootstrap container... One located top left and one located top right.
I can get the one top left to sit where I want it to, but the bottom right one, when putting right: 20px sits to the right of the browser itself, and not within the container.
Here is my HTML & CSS:
<div id="header">
<div class="container">
<div class="div1">
Top left content
</div>
<div class="div2">
Bottom right content
</div>
</div>
</div>
#header {
height: 625px;
position: relative;
}
#header .div1 {
position: absolute;
top: 20px;
}
#header .div2 {
position: absolute;
bottom: 20px;
right: 20px;
}
Any suggestions on how to get the bottom right div to sit to the right of the container and not the browser, would be greatly appreciated.
Thanks
Your absolute divs are placed inside the #header element since you applied position:relative on it.
Bootstrap doesn't have explicitly set relative position for container class. You need to set position for container and then your absolute divs will be placed inside the container:
.container{
position: relative;
}
So, it would be good to replace the following:
#header {
height: 625px;
position: relative;
}
With this:
#header .container{
height: 625px;
position: relative;
}
<style>
#header {
height: 625px;
position: relative;
}
#header .div1 {
float: left;
top: 20;
}
#header .div2 {
position: absolute;
bottom: 20;
right: 0;
}
</style>
<div id="header">
<div class="container">
<div class="div1">
Top left content
</div>
<div class="div2">
Bottom right content
</div>
</div>
</div>
I've tried many technics and I can't seem to fix this issue.
I would like my menu to always stay at the top of it's parent div. I've made a Codepen of my layout.
Here's the html of my menu and it's parents:
<div id="main-wrapper" class="background-yellow">
<!-- center column -->
<div id="center-wrapper">
<nav id="navbar">
<div id="navbar-wrapper">
<ul id="main-nav">
<li>Édito</li>
<li>Programme</li>
<li>Participants</li>
<li>Situation</li>
<li>À propos</li>
<li>Infos</li>
<li>Newsletter</li>
</ul>
</div>
</nav>
</div>
</div>
And here's their css:
#main-wrapper {
width: 100%;
height: 100%;
}
#center-wrapper {
position: absolute;
left: 30%;
width: 40%;
height: 100%;
}
#navbar {
position: absolute;
width: 100%;
height: 100px;
}
#navbar-container {
position: fixed;
z-index: 666;
}
#main-nav {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
#main-nav li {
display: inline-block;
margin: 10px;
}
--EDIT--
Managed to fix the problem, thanks to Zac.Ledyard, now I need #navbar to be 100% of it's parent div, that is #center-wrapper.
Thanks in advance guys.
One of your CSS id selectors is named wrong. Change #navbar-container to #navbar-wrapper
#navbar-wrapper {
position: fixed;
z-index: 666;
}
The method is simple.
Position:relative for a parent element
Position:absolute for a child element
That way the child element always binds to the top of it's parent element.
Any absolute positioned element has a position in the coordinates of the nearest relative positioned parent ( if none are present - the document itself )
It's really unclear from your page code what's going on there , and what you're trying to achieve.
To bind an element to the top of the -page- ( not to scroll with it ) you need to use position:fixed
I have a navigation bar under a header div tag
and a slideshow div afterwards ... as the code shows
<div class="header">
<div id="navbar">
content
</div>
</div>
<div class="container">
<div class="slideshow" id="slideshow">
slideshow content
</div>
</div>
the header and navbar have a fixed position to stay on top of the page when scrolling , the problem is when I scroll my "slideshow" appears on top of the navbar but the rest of the page content does not, how can I fix this ?
CSS styles
.slideshow {
position: relative;
margin-bottom: 10px;
padding: 50px 0 0 0 ;
}
Different CSS sheet for header and navbar
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
}
#ime-nav {
position: fixed;
width: 100%;
z-index: 10000;
background:#FF9900;
}
apparently I just needed to add a z-index to the header, completely overlooked it
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
z-index: 1;
}