I have a transparent header which can't be a image or a color, it needs to be transparent. Whenever some divs slides under my header I want to hide only the part which is below it.
Problem
body {
margin: 0;
width: 100%;
background-color: yellow;
height: 100vh;
}
.header {
height: 5rem;
top: 0;
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.content {
margin-top: 25rem;
height: 200px;
background-color: blue;
color: white;
}
.footer {
margin-top: 30rem;
height: 5rem;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
<div class="header"> Header</div>
<div class="content"> DONT SHOW THIS DIV UNDER HEADER</div>
<div class="footer">footer</div>
Actually you can achieve this without javascript at all. You can put element "under" the .header with body's background, and set the proper z-index in order to keep it under.
Something like that:
body {
margin: 0;
width: 100%;
background-color: yellow;
height: 100vh;
}
.header {
height: 5rem;
top: 0;
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 3;
}
.content {
margin-top: 25rem;
height: 200px;
background-color: blue;
color: white;
z-index: 1;
}
.footer {
margin-top: 30rem;
height: 5rem;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
/* this will act as a mask to hide the content when it get "under" the header: */
#contentMask {background: inherit; z-index: 2; position: fixed; top: 0; left: 0; height: 5em; width: 100%;}
<div class="header"> Header</div>
<div class="content"> DONT SHOW THIS DIV UNDER HEADER</div>
<div id="contentMask"></div>
<div class="footer">footer</div>
Edit (as for comment):
You can play with z-index property in order to achieve it. This is a general example:
body {
margin: 0;
width: 100%;
background-color: yellow;
height: 100vh;
}
.header {
height: 5rem;
top: 0;
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 4;
}
#contentMask {
background: inherit;
position: fixed;
top: 0;
left: 0;
height: 5em;
width: 100%;
z-index: 2;
}
.content {
position: relative;
margin-top: 25rem;
height: 200px;
background-color: blue;
color: white;
z-index: 1;
}
.under { z-index: 3; }
.above { z-index: 5; }
.footer {
margin-top: 30rem;
height: 5rem;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
<div class="header"> Header</div>
<div id="contentMask"></div>
<div class="content"> DONT SHOW THIS DIV UNDER HEADER</div>
<div class="content under"> SHOW THIS DIV UNDER HEADER</div>
<div class="content above"> SHOW THIS DIV ABOVE HEADER</div>
<div class="footer">footer</div>
Related
JSFiddle link
z-index cannot be set to -1, positioning cannot be changed for first and second div.
* {
box-sizing: border-box;
}
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}
.first {
position: absolute;
left: 0;
top: 0;
z-index: 0;
height: 100px;
width: 120px;
background-color: blue;
}
<div class="first"></div>
<div class="second"></div>
Apply a transformation (without visible effects) on the second div e.g.
transform: scale(1);
https://jsfiddle.net/cbeaw84h/
Position your second div:
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
position: relative; // This
}
You should use position: relative and they'll overlay.
.second {
position: relative;
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}
If you cannot touch the CSS code really, simply nest the second div inside the first.
* {
box-sizing: border-box;
}
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}
.first {
position: absolute;
left: 0;
top: 0;
z-index: 0;
height: 100px;
width: 120px;
background-color: blue;
}
<div class="first">
<div class="second"></div>
</div>
How can I achieve a <div> overlap so that the div #inner-block us in the foreground?
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}
<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>
A simple solution would be to update your HTML like so:
<div id="block-1">
<div id="inner-block"></div></div>
<div id="block-2">
</div>
This works because it ensures that the ordering of block-2 and inner-block is relative to a common parent; block-1:
#block-1
{
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block
{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2
{
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}
<div id="block-1">
<div id="inner-block"></div>
<div id="block-2"></div>
</div>
Hope this helps!
Simply remove z-index from #bloc-1. This will make .inner-block to belong to the same stacking context of #bloc-1 and not the one created by #bloc-1.
For those with 'z-index: auto', treat the element as if it created a
new stacking context, but any positioned descendants and descendants
which actually create a new stacking context should be considered part
of the parent stacking context, not this new one.ref
This means that the 3 divs will belong to the same stacking context thus we can have any order we want
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}
<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>
I've the following example below. When you click the yellow box, an overlay will be shown and it works fine. But when i then scroll down it ofc stays because it has a position fixed.
How can i make sure the overlay stay ontop of the .div when i scroll, aka so it "don't move"?
$('.modal').css("top", $(".div").offset().top).css("left", $(".div").offset().left).css("width", $(".div").css("width")).css("height", $(".div").css("height"));
$(".div").click(function() {
$('.modal').addClass("loading");
})
.div {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 300px;
background-color: yellow;
content: "";
}
body {
height: 500px;
background-color:black;
}
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
.modal.loading {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>
<div class="modal"></div>
Change your position to absolute.
.modal {
display: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
Change the fixed position of the modal with a absolute position , place the .modal in the .div
$(".div").click(function() {
$('.modal').addClass("loading");
})
.div {
margin: 100px auto 0;
height: 300px;
width: 300px;
background-color: yellow;
position: relative;
}
body {
height: 500px;
background-color: black;
}
.modal {
display: none;
position: absolute;
top:0;
left:0;
z-index: 2;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
.modal.loading {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
.div content
<div class="modal"></div>
</div>
I think you want something like this, tell if i'm doing something wrong.
First you need to change position: fixed; with position: absolute; in modal class.
Then put modal class div into class div like this
<div class="div">
<div class="modal"></div>
</div>
check snippet for running in action
$(".div").click(function() {
$('.modal').addClass("loading");
})
.div {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 300px;
background-color: yellow;
position: relative;
}
body {
height: 500px;
background-color: black;
}
.modal {
display: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
.modal.loading {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="modal"></div>
</div>
I tried to make every one of these divs fits to the browser page in height and width. I also need to attached to the edge of the page when I see them until I scroll down to the next div. How do I do that?
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: auto;
width: 100%;
color: #fff;
}
.div1 {
background: #555;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.div2 {
background: #ccc;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.div3 {
background: #c55;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.div4 {
background: #006;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
<div class="container">
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
<div class="div3">DIV 3</div>
<div class="div4">DIV 4</div>
</div>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
width: 100%;
color: #fff;
}
.div1 {
background: #555;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.div2 {
background: #ccc;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.div3 {
background: #c55;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.div4 {
background: #006;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
<div class="container">
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
<div class="div3">DIV 3</div>
<div class="div4">DIV 4</div>
</div>
.container has to have height: 100%; otherwise the DIVs in it won't get their 100% height.
so I'm working on this jQuery Image slider (w/carouFredSel) that will be 100% wide and display the previous and next image as well. I got a great example from this site: http://coolcarousels.frebsite.nl/c/2/. However, when I change the img tags to divs, it does not work. I'm not sure as to why it doesn't.
This is the code that I am using:
#wrapper {
background-color: #fff;
width: 100%;
height: 450px;
margin-top: -225px;
overflow: hidden;
position: absolute;
top: 50%;
left: 0;
}
#carousel img {
display: block;
float: left;
}
#prev, #next {
background-color: rgba(255, 255, 255, 0.7);
display: block;
height: 450px;
width: 50%;
top: 0;
position: absolute;
}
#prev:hover, #next:hover {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.8);
}
#prev {
left: -495px;
}
#next {
right: -495px;
}
#pager {
margin-left: -470px;
position: absolute;
left: 50%;
bottom: 10px;
}
#pager a {
border: 2px solid #fff;
border-radius: 10px;
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px 0 0;
}
#pager a:hover {
background-color: rgba(255, 255, 255, 0.5);
}
#pager a span {
display: none;
}
#pager a.selected {
background-color: #fff;
}
<div id="wrapper">
<div id="carousel">
<div style="width: 990px; height: 450px; background-color: #F00;"></div>
<div style="width: 990px; height: 450px; background-color: #F00;"></div>
<div style="width: 990px; height: 450px; background-color: #F00;"></div>
<div style="width: 990px; height: 450px; background-color: #F00;"></div>
<div style="width: 990px; height: 450px; background-color: #F00;"></div>
</div>
<div id="pager"></div>
</div>
$(function() {
$('#carousel').carouFredSel({
width: '100%',
items: {
visible: 3,
start: -1
},
scroll: {
items: 1,
duration: 1000,
timeoutDuration: 3000
},
prev: '#prev',
next: '#next',
pagination: {
container: '#pager',
deviation: 1
}
});
});
Now I am Sure.This one worked! http://jsfiddle.net/vvdp39vk/4/
#carousel div{
display: block;
float: left;
}