How to make sidebar appear in front of header?
.header {
z-index: -10;
margin: auto;
width: auto;
height: 70px;
background-color: black;
}
.sidebar {
position: relative;
z-index: 10;
margin: auto;
height: 1335px;
width: 65px;
background-color: red;
}
<div id="wrapper">
<header>
<div class="header"></div>
<div class="sidebar"></div>
</header>
</div>
In your code, both elements are within the document flow. So the sidebar appears after the header, not overlapping. One method of making them overlap is to set one of them to position:absolute and remove it from the document flow.
body {
margin: 0;
}
.header {
height: 70px;
background-color: black;
}
.sidebar {
position: absolute;
top: 0;
left: 50%;
margin-left: -32.5px;
width: 65px;
height: 1335px;
background-color: red;
}
<div id="wrapper">
<header>
<div class="header"></div>
<div class="sidebar"></div>
</header>
</div>
For further reference, see:
Visual formatting model
Positioning
Related
I'm trying to create an area that contains all my absolutely positioned items. It works great until its sibling has an overflow attached to it. In the example below, when you start scrolling, the child div scrolls as if it's fixed. If you comment out the overflow: auto in the #app CSS, you'll get the desired behavior, but obviously the layout is incorrect. How can I fix this issue without moving the absolute div into the #app div?
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.child {
top: 20px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">
Content 1
</div>
</div>
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
If you want to use absolute positioning on .absolute you'll have to nest that code within #app and set it to position: relative;. The absolute positioning is referring to its nearest positioned ancestor, in this case, the body element, hence, why it is staying fixed. So you'll have to set #app to relative and it should work just fine.
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
position: relative;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.child {
top: 20px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">
Content 1
</div>
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
</div>
This should also work for you, see changes I made to HTML and CSS below.
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: relative;
top: 0;
left: 0;
}
.child {
top: 0px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
color: black;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">Content 1
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
</div>
</div>
I have been able to create a centered vertical line but it increases my webpage width off of my screen! I would like some insight on how I can create a centered vertical line down my page while keeping page width to fit my screen (so that there is no horizontal scroll bar).
When I have removed the line my page width is perfect therefore I do not think it is one of my divs causing the problem.
body {
background-color: lightblue
}
.vertical_line {
border-left: 6px solid black;
height: 500px;
position: relative;
left: 50%;
margin-left: auto;
z-index: -1;
}
.section-2 {
width: 100%;
height: 200px;
}
.section-3 {
position: relative;
top: 50;
width: 500px;
height: 60%;
padding: 20px;
margin-left: auto;
margin-right: auto;
background-color: green;
}
<section class="section-2">
<div class="topnav">
<a style="background-color:grey; width:100px">this is my nav bar</a>
</div>
<div class="vertical_line"></div>
</section>
<section class="section-3">
<div class="paragraph"></div>
</section>
<div class="vertical_line"></div>
Problem arises because you used position: relative; and shifted it 50% left, but it means element is still part of flow and shifting it pushes it past the edge of the screen. On the other hand position absolute removes it from the flow. But if you want to use position: relative; for some reason, then add overflow-x : hidden; in the body, it will work fine in your case. Also a good CSS reset always helps, so as you do not get unexpected scrollbars.
* {
padding: 0px;
margin: 0px;
}
body {
background-color: lightblue;
width: 100%;
min-height: 100vh;
}
.vertical_line {
border-left: 6px solid black;
height: 500px;
position: absolute;
left: 50%;
margin-left: auto;
z-index: -1;
}
.section-2 {
width: 100%;
height: 200px;
}
.section-3 {
position: relative;
top: 50;
width: 500px;
height: 60%;
padding: 20px;
margin-left: auto;
margin-right: auto;
background-color: green;
}
<html>
<section class="section-2">
<div class="topnav">
<a style="background-color:grey; width:100px">this is my nav bar</a>
</div>
<div class="vertical_line"></div>
</section>
<section class="section-3">
<div class="paragraph"></div>
</section>
<div class="vertical_line"></div>
</html>
With help of overflow-x: hidden; and position : relative; :
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
min-height: 100vh;
overflow-x: hidden;
}
.vl {
border-left: 6px solid black;
height: 5000px;
position: relative;
left: 50%;
}
<html>
<body>
<h2>Vertical Line</h2>
<div class="vl"></div>
</body>
</html>
I have created two div one is with class name .main and the second one is .container.
* {
margin: 0;
padding: 0;
}
.main {
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
position: absolute;
left: 5%;
right: 5%;
top: 25%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
When I am resizing the browser windows vertically the div with the class .container is changing its position. I want it to below the main div.
If you want your div positioned below the .main div (i.e. relative to the .main div), then you should refrain from using absolute positioning and use relative positioning instead. You can also not define a position property - by default it will be set to static, which also works:
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
left: 5%;
right: 5%;
top: 100%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
By default, the .main will be below .container. And position: absolute will remove the element completely out of the document flow.
* {
margin: 0;
padding: 0;
}
.main {
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
margin: 0 5%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
Try this.
I am new to CSS and HTML, and I am working on my final project for school.
I am trying to absolutely position some text "Welcome" to a div I've made. For some reason it won't position in relation to the div, I've looked it over 10 times and can't figure out why.
I want the "Welcome" text to sit at the bottom of the welcome div, however when I put bottom:0px; into the CSS, it doesn't position according to its parent container and instead goes 0px from the top of the whole screen.
Here's the code:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
height: 150px;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
You are very close. Take the height away from the .w p tag and remove its margin as well:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
/*height: 150px;*/
margin: 0;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
The problem, as CalvinNunes pointed out, is that you have a height set on .w div. And, p elements have margin and line-height values by default. You need to remove the margin and set the line-height to 1 or less (.5 makes the text touch the bottom of the green box).
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
position: relative;
}
#header {
height: 150px;
background-color: red;
position: absolute;
width: 100%;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav">
</nav>
</header>
</div>
<!-- End of wrapper-->
If you use absolute on something, related dom element should be relative, absolute or fixed, depending on your needs.
Also check if your absolute element doesn't have some unneeded margins etc.
But in your usage case i don't think that there is absolute needed. you can use bigger paddings for parent element top. Also this can be achieved using flex-end, which will allow dynamic text input.
I have this HTML structure
<div id="header">
…
</div>
<div id="menu">
...
</div>
<div id="content">
...
</div>
<div id="footer">
...
</div>
And the CSS:
#header {
height: 100px;
}
#footer {
border: 1px solid #989898;
padding-bottom: 0.1em;
width: 100%;
height: 2.2em;
position: fixed;
bottom: 0px;
left: 0px;
}
#menu {
width: 150px;
float: left;
???
}
#content {
???
}
Header and footer are OK, but the question comes from menu and content divs:
'menu' div must fill from header to footer, without scrolling
'content' must show scroll if necessary.
What CSS code for them will make it real?
My approach would be to wrap 'menu' and 'content' in a wrapper of their own like this:
<div id='contentWrapper'>
<div id="menu">
....
</div>
<div id="content">
....
</div>
</div>
Styled like this:
#contentWrapper {
width: 1000px;
overflow: hidden;
background-color: yellow;
}
#menu {
width: 150px;
float: left;
background-color: transparent;
}
#content {
width: 850px;
float: left;
background-color: white;
}
The colours are there to illustrate. Actually, menu is still the same height as it always was, and will stretch around whatever you put in it, but it will always appear to take on the full height of 'content' because you can see through it, and its taking its background colour from the wrapper - which stretches around both menu and content.
try this
#menu {
width: 150px;
height: 100%;
overflow-y: auto;
display: block;
}
HTML
<div id="wrapper">
<div id="header">
...
</div>
<div id="menu">
...
</div>
<div id="content">
...
</div>
<div id="footer">
...
</div>
</div>
CSS
#wrapper
{
position: relative;
...
...
}
#header
{
position: absolute;
top: 0;
left: 0;
height: 100px;
}
#footer
{
position: absolute;
bottom: 0;
height: XXXpx;
display: block;
}
#menu
{
position: absolute;
top: 110px;
left: 0;
bottom: 0;
width: 150px;
height: 100%;
display: block;
}
#content
{
position: absolute;
top: 110px;
left: 160px;
width: XXXpx;
display: block;
}