I'm trying to create a map with drop down in it I want the drop down to appear on the map like map shows in background and dropdown on top of it. Right now it is looking
like this
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 100;
overflow: auto;
height: 100px;
}
.dropdown:hover .dropdown-content {
display: block;
}
#map {
margin: 0 0 0 0;
height: 100vh;
width: 100%;
position: absolute;
display: block;
}
<div class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
<div class="dropdown">
<span>Select Country</span>
<div class="dropdown-content">
</div>
</div>
<div id="map"></div>
</div>
and here is the code:
I think you need z-index. Try something like this,
.dropdown {
position: absolute;
display: inline-block;
left: 0;
top: 0;
z-index: 3;
}
#map {
margin: 0 0 0 0;
height: 100vh;
width: 100%;
z-index: 1;
position:absolute;
display: block;
}
It would be best to wrap both the components in a container, giving the container the position: relative attribute, then position the dropdown using position: absolute with the top and left values you require.
Here is an example of how you would achieve it:
.container {
position: relative;
}
.dropdown {
position: absolute;
background: white; /* TODO: Remove this temporary styling */
display: inline-block;
top: 5px;
left: 5px;
z-index: 1000;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 100;
overflow: auto;
height: 100px;
}
.dropdown:hover .dropdown-content {
display: block;
}
#map {
background: black; /* TODO: Remove this temporary styling */
background-image: url('https://i.imgur.com/hiuuHaf.png'); /* TODO: Remove this temporary styling */
background-repeat: no-repeat; /* TODO: Remove this temporary styling */
margin: 0 0 0 0;
height: 100vh;
width: 100%;
display: block;
}
<div
class="col-lg-12 col-12 col-md-12 col-sm-12"
style="padding-left: 0px; padding-right: 0px">
<div class="container">
<div class="dropdown">
<span>Select Country</span>
<div class="dropdown-content"></div>
</div>
<div id="map"></div>
</div>
</div>
Simply remove the CSS where I have commented /* TODO: Remove this temporary styling */ which is purely for demonstration purposes
You have to add position: relative; in the parent and then position: absolute; on the dropdown.
Something like this
#container {
position: relative;
}
.dropdown {
position: absolute;
display: inline-block;
top: 1rem;
left: 1rem;
background-color: #f9f9f9;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 100;
overflow: auto;
height: 100px;
}
.dropdown:hover .dropdown-content {
display: block;
}
#map {
margin: 0 0 0 0;
height: 100vh;
width: 100%;
background-color: red;
padding: 10rem;
/*position:absolute;
display: block;*/
}
<div id="container" class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
<div class="dropdown">
<span>Select Country</span>
<div class="dropdown-content">
</div>
</div>
<div id="map">This is the map</div>
</div>
</div>
replaced dropdown-content:absoulteand pushing 100% from top top:100%.
keeping the height:0 and adding the height:100px and padding on hover.
because in case you want animation you woulnt be able to do it display:none
also added a transition:all 0.25s ease-in-out;
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
left:0;
top:100%;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 100;
overflow: hidden;
height: 0px;
transition:all 0.25s ease-in-out;
}
.dropdown:hover .dropdown-content {
padding: 12px 16px;
height:100px;
}
#map {
margin: 0 0 0 0;
height: 100vh;
width: 100%;
position: absolute;
display: block;
}
<div class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
<div class="dropdown">
<span>Select Country</span>
<div class="dropdown-content">
</div>
</div>
<div id="map"></div>
</div>
Case 1: Replace the .dropdown:hover .dropdown-content's display property to inline
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 100;
overflow: auto;
height: 100px;
}
.dropdown:hover .dropdown-content {
display: inline;
}
#map {
margin: 0 0 0 0;
height: 80vh;
width: 250px;
width: 100%;
position: absolute;
display: block;
border: 1px red solid;
}
<div class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
<div class="dropdown">
<span>Select Country</span>
<div class="dropdown-content">
</div>
</div>
<div id="map"></div>
</div>
</div>
Case 2: Put the select-menu inside the map div.
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 100;
overflow: auto;
height: 100px;
}
.dropdown:hover .dropdown-content {
display: inline;
}
#map {
margin: 0 0 0 0;
height: 80vh;
width: 250px;
width: 100%;
position: absolute;
display: block;
border: 1px red solid;
}
<div class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
<div id="map">
<div class="dropdown">
<span>Select Country</span>
<div class="dropdown-content">
</div>
</div>
</div>
</div>
Case 3: You can also put position: relative to the parent and position: absolute to the child. Then you can play around with the top, bottom, left, right properties.Read on MDN.
But again, to achieve this you must put the select-menu (the children) inside the map (parent). Hope this helps.
Related
I have a "main-div" with specific height and a dropdown on bottom part inside it. The dropdown is causing extra scroll. Is there any way to stop causing scroll and make it overlap through the parent div?
(height and properties of the main div cannot be changed in my real situation)
.main-div{
height: 300px;
width: 600px;
overflow-y: scroll;
border: 2px solid #404040;
}
.dropdown {
position: relative;
display: inline-block;
margin-bottom: 10px;
margin-top: 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #109fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.other-content{
height: 280px;
background-color: rgb(80, 210, 166);
}
.button-1{
background-color: #180f37;
padding: 10px;
border: #0f1c40;
color: #fff;
}
<div class="main-div">
<div class="other-content">
<h4>Scroll down to see the button</h4>
</div>
<div class="dropdown">
<span class="button-1">Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</div>
I need little help, I'm new to JavaScript. I'm not sure how to fix the bug, currently, the code on hover is making the first box to display the title. But I want the title to be shown only on the chosen box. I thought in the for loop, the boxes[i] will make his first className[0] to display flex, but I guess it doesn't work that way. How can I fix this?
var boxes = document.getElementsByClassName("portfolio-content-box");
for(var i = 0; i < boxes.length; i ++){
boxes[i].addEventListener("mouseover", function(){
document.getElementsByClassName("portfolio-content-title-box")[0].style.display = "flex";
})
}
.portfolio-content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-self: center;
margin-top: 100px;
padding: 2rem;
}
.portfolio-content-box {
position: relative;
width: 400px;
height: 350px;
margin: 1rem;
border-left:2px solid red;
cursor:pointer;
transition:0.3s;
}
.portfolio-content-box:hover {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.portfolio-content-img {
width: 400px;
height: 350px;
object-fit: cover;
}
.portfolio-content-title-box {
position: absolute;
top:0;
left:0;
color: #FFF;
text-shadow: 0px 1px 1px RGBA(0,0,0,1);
background-color:rgba(0,0,0,0.8);
width:100%;
height:100%;
display:none;
}
.portfolio-content-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="portfolio-container">
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyn7ssQEg-KFcYHmAelMv3ro3wGqsMdmE8lw&usqp=CAU" class="portfolio-content-img"/>
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqg54h1j3ljdf73LUi1rAobP0jxmrbEd9W1A&usqp=CAU" class="portfolio-content-img"/>
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
</div>
Not sure why you want to use JS, but it can be done with pure CSS. You just need to target the title box when someone hovers the content box as below
.portfolio-content-box:hover>.portfolio-content-title-box {
display: flex;
}
Working Code
.portfolio-content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-self: center;
margin-top: 100px;
padding: 2rem;
}
.portfolio-content-box {
position: relative;
width: 400px;
height: 350px;
margin: 1rem;
border-left: 2px solid red;
cursor: pointer;
transition: 0.3s;
}
.portfolio-content-box:hover {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.portfolio-content-img {
width: 400px;
height: 350px;
object-fit: cover;
}
.portfolio-content-title-box {
position: absolute;
top: 0;
left: 0;
color: #FFF;
text-shadow: 0px 1px 1px RGBA(0, 0, 0, 1);
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
display: none;
}
.portfolio-content-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.portfolio-content-box:hover>.portfolio-content-title-box {
display: flex;
}
<div id="portfolio-container">
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyn7ssQEg-KFcYHmAelMv3ro3wGqsMdmE8lw&usqp=CAU" class="portfolio-content-img" />
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqg54h1j3ljdf73LUi1rAobP0jxmrbEd9W1A&usqp=CAU" class="portfolio-content-img" />
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
</div>
This question already has answers here:
Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
(1 answer)
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 1 year ago.
Today I am facing a vey weird issue in css backdrop-filter: blur(7px);
First look at first snippet
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
font-family: "Roboto", sans-serif;
}
p {
color: white;
}
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 100%;
width: 550px;
background-color: #8f656514;
min-height: 400px;
margin: auto;
padding: 15px;
box-shadow: 0px 0px 8px 0.1px #393939;
margin: auto;
/* position: relative; */
display: flex;
align-items: center;
flex-direction: column;
}
.common {
margin: 35px 0px;
box-shadow: 0px 3px 5px 0px #7f5b5b;
padding: 10px 10px;
width: 100%;
height: 100px;
background-color: red;
/* display: contents; */
}
.in {
display: flex;
color: white;
border-radius: 100px;
align-items: center;
padding: 7px 10px;
background-color: #3a3b3c45;
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
box-shadow: 0px 0px 4px 0.5px #918b90;
height: 50px;
}
.bug {
height: 26px;
background-color: rebeccapurple;
/* position: absolute; */
/* width: 50%; */
bottom: 150px;
height: 100px;
width: 100px;
/* bottom: 500px; */
border-radius: initial;
}
<div class="container">
<div class="one common">
<p>First Container</p>
<div class="in">
<p>blurred container </p>
</div>
</div>
<div class="two common">
<p>second Container</p>
<div class="in bug">
blurred overflow
</div>
</div>
<div class="three common">
<p>Third Container</p>
<div class="in ">
<p>blurred container </p>
</div>
</div>
</div>
as You are seeing there are 3 containers .
every container have a blurred container by backdrop-filter: blur(7px);
but 2nd container's blurred element is overflowing the parent .
Till now everything is working fine .
First weird thing
by positioning absolute and moving overflowing container towards bottom , it is just lying under
the 3rd containers blurred element while it should be at the top of that blurred element
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
font-family: "Roboto", sans-serif;
}
p {
color: white;
}
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 100%;
width: 550px;
background-color: #8f656514;
min-height: 400px;
margin: auto;
padding: 15px;
box-shadow: 0px 0px 8px 0.1px #393939;
margin: auto;
/* position: relative; */
display: flex;
align-items: center;
flex-direction: column;
}
.common {
margin: 35px 0px;
box-shadow: 0px 3px 5px 0px #7f5b5b;
padding: 10px 10px;
width: 100%;
height: 100px;
background-color: red;
/* display: contents; */
}
.in {
display: flex;
color: white;
border-radius: 100px;
align-items: center;
padding: 7px 10px;
background-color: #3a3b3c45;
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
box-shadow: 0px 0px 4px 0.5px #918b90;
height: 50px;
}
.bug {
height: 26px;
background-color: rebeccapurple;
position: absolute;
bottom: -142px;
height: 100px;
width: 100px;
/* bottom: 500px; */
border-radius: initial;
}
<div class="container">
<div class="one common">
<p>First Container</p>
<div class="in">
<p>blurred container </p>
</div>
</div>
<div class="two common">
<p>second Container</p>
<div class="in bug">
blurred overflow
</div>
</div>
<div class="three common">
<p>Third Container</p>
<div class="in ">
<p>blurred container </p>
</div>
</div>
</div>
to see the result please reset the bootom css attribute of .bug class according to your browser
How it's gone
I just removed the backdrop-filter property from 3 blurred container .
to see the result please reset the bootom css attribute of .bug class according to your browser
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
font-family: "Roboto", sans-serif;
}
p {
color: white;
}
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 100%;
width: 550px;
background-color: #8f656514;
min-height: 400px;
margin: auto;
padding: 15px;
box-shadow: 0px 0px 8px 0.1px #393939;
margin: auto;
/* position: relative; */
display: flex;
align-items: center;
flex-direction: column;
}
.common {
margin: 35px 0px;
box-shadow: 0px 3px 5px 0px #7f5b5b;
padding: 10px 10px;
width: 100%;
height: 100px;
background-color: red;
/* display: contents; */
}
.in {
display: flex;
color: white;
border-radius: 100px;
align-items: center;
padding: 7px 10px;
background-color: #3a3b3c45;
/* -webkit-backdrop-filter: blur(7px); */
/* backdrop-filter: blur(7px); */
box-shadow: 0px 0px 4px 0.5px #918b90;
height: 50px;
}
.bug {
height: 26px;
background-color: rebeccapurple;
position: absolute;
bottom: 24%;
height: 100px;
width: 100px;
/* bottom: 500px; */
border-radius: initial;
}
<div class="container">
<div class="one common">
<p>First Container</p>
<div class="in">
<p>blurred container </p>
</div>
</div>
<div class="two common">
<p>second Container</p>
<div class="in bug">
blurred overflow
</div>
</div>
<div class="three common">
<p>Third Container</p>
<div class="in ">
<p>blurred container </p>
</div>
</div>
</div>
Another weird thing with backdrop filter is --
with backdrop filter the overflowing element is on the top of the first container's blurred element instead on the behind of it
to see the result please reset the bootom css attribute of .bug class according to your browser
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
font-family: "Roboto", sans-serif;
}
p {
color: white;
}
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 100%;
width: 550px;
background-color: #8f656514;
min-height: 400px;
margin: auto;
padding: 15px;
box-shadow: 0px 0px 8px 0.1px #393939;
margin: auto;
/* position: relative; */
display: flex;
align-items: center;
flex-direction: column;
}
.common {
margin: 35px 0px;
box-shadow: 0px 3px 5px 0px #7f5b5b;
padding: 10px 10px;
width: 100%;
height: 100px;
background-color: red;
/* display: contents; */
}
.in {
display: flex;
color: white;
border-radius: 100px;
align-items: center;
padding: 7px 10px;
background-color: #3a3b3c45;
/* -webkit-backdrop-filter: blur(7px); */
backdrop-filter: blur(7px);
box-shadow: 0px 0px 4px 0.5px #918b90;
height: 50px;
}
.bug {
height: 26px;
background-color: rebeccapurple;
position: absolute;
/* bottom: 24%; */
height: 100px;
width: 100px;
bottom: 500px;
border-radius: initial;
}
<div class="container">
<div class="one common">
<p>First Container</p>
<div class="in">
<p>blurred container </p>
</div>
</div>
<div class="two common">
<p>second Container</p>
<div class="in bug">
blurred overflow
</div>
</div>
<div class="three common">
<p>Third Container</p>
<div class="in ">
<p>blurred container </p>
</div>
</div>
</div>
I have no idea what's going on here and why ???
Please help me to understand this
I want to create this Image style with css. I have created section but I am facing difficulty to rotate it. I want green section straight but when I am rotating main wrapper all things are rotate. but that is wrong.
for reference please check Image
http://prntscr.com/jempp4
Any type of help will be appreciated. Not sure If I have explained my problem is good way.
Thanks in advance.
.banner-bg{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
transform: rotate(-15deg);
}
.banner-bg .banner-bg-sec{
width: 33.3333%;
position: relative;
}
.bg-green{
background: #528E72;
}
.bg-blue{
background: #4C6CC1;
}
.bg-blue2{
background: #4475D4;
}
.bg-red{
background: #CB431B;
}
.bg-red2{
background: #F54F1D;
}
.bg-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0,0,0,0.2);
}
.bg-text{
font-size: 28px;
color: rgba(255,255,255,0.6);
}
.bg-icon{
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li{
display: inline-block;
vertical-align: middle;
}
.bg-icon li a{
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
<a href="#">
F
</a>
</li>
<li>
<a href="#">
T
</a>
</li>
<li>
<a href="#">
I
</a>
</li>
</ul>
</div>
</div>
</div>
you can rotate only the title of the column and use clip-path to crop the main container, push the blue one a bit to the bottom and to make the title cover the whole width, widen it a little bit and use overflow-x:hidden for its parent, see the result in this fiddle : https://jsfiddle.net/fyhv9r8h/
#header {
background: url('https://kilianvalkhof.com/wp-content/themes/kvsixteen/static/img/bg2.jpg');
width: 100%;
height: 230px;
position: absolute;
}
.banner-bg {
position: absolute;
top: 100px;
width: 100%;
height: 160px;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
clip-path: polygon(0% 38%, 100% 0%, 100% 100%, 0% 100%);
}
.banner-bg .banner-bg-sec {
width: 33.3333%;
position: relative;
overflow-x: hidden;
}
.bg-green {
background: #528E72;
}
.bg-blue {
background: #4C6CC1;
top: 38px;
}
.bg-blue2 {
background: #4475D4;
}
.bg-red {
background: #CB431B;
}
.bg-red2 {
background: #F54F1D;
}
.bg-inner {
position: absolute;
top: 0;
left: -10px;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0, 0, 0, 0.2);
transform: rotate(-6deg)
}
.bg-text {
font-size: 28px;
color: rgba(255, 255, 255, 0.6);
}
.bg-icon {
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li {
display: inline-block;
vertical-align: middle;
}
.bg-icon li a {
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div id="header">
</div>
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
F
</li>
<li>
T
</li>
<li>
I
</li>
</ul>
</div>
</div>
</div>
Hmm interesting.. maybe have a look at transform:skewY instead of rotate... though you'll have to "unskew" the text or find other way to place it...
.banner-bg{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
transform: skewY(-15deg);
}
span, ul {
transform: skewY(15deg) rotate(-15deg);
}
.banner-bg .banner-bg-sec{
width: 33.3333%;
position: relative;
}
.bg-green{
background: #528E72;
}
.bg-blue{
background: #4C6CC1;
}
.bg-blue2{
background: #4475D4;
}
.bg-red{
background: #CB431B;
}
.bg-red2{
background: #F54F1D;
}
.bg-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0,0,0,0.2);
}
.bg-text{
font-size: 28px;
color: rgba(255,255,255,0.6);
}
.bg-icon{
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li{
display: inline-block;
vertical-align: middle;
}
.bg-icon li a{
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
<a href="#">
F
</a>
</li>
<li>
<a href="#">
T
</a>
</li>
<li>
<a href="#">
I
</a>
</li>
</ul>
</div>
</div>
</div>
I have the following CSS code:
#section1{
background-color: red;
height: 600px;
}
#section2{
background-color: blue;
height: 700px;
}
#section3{
background-color: orange;
height: 300px;
position:relative;
}
#footer{
bottom:0px;
}
#footer {
position:fixed;
display:block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
#betterFooter {
position:absolute;
bottom: 0px;
display:block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
And thanks to it I have the footer constantly visible on my webpage when I scroll up/down. What I want to achieve is to have another footer with different text visible on the very bottom of the page, so when user scrolls down and enters #section3, the normal footer will disappear and he will see only the new footer. I thought I could just use the CSS attribute:
#section3 #footer{
display:none;
}
but seems like it does not solve my case. The full html and css code is attached in my fiddle. Thanks!
Just add z-index to #section3 and it will work :)
http://jsfiddle.net/pxyr19ob/1/
* {
margin: 0;
}
#section1 {
background-color: red;
height: 600px;
}
#section2 {
background-color: blue;
height: 700px;
}
#section3 {
background-color: orange;
height: 300px;
position: relative;
z-index: 10;
}
#footer {
bottom: 0px;
}
#footer {
position: fixed;
display: block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9;
text-align: center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
#betterFooter {
position: absolute;
bottom: 0px;
display: block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9;
text-align: center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
<div id="section1">
</div>
<div id="section2">
</div>
<div id="section3">
<div id="betterFooter">
I would like to see this text on the very bottom of the webpage
</div>
</div>
<div id="footer">
I would like to see this text anywhere on the page but not when I scroll to the very bottom
</div>
Give #betterFooter an higher z-index than the one of #footer. And remove the trasparency from it too.
Running demo on jsFiddle
body {
margin: 0;
}
#section1 {
background-color: red;
height: 600px;
}
#section2 {
background-color: blue;
height: 700px;
}
#section3 {
background-color: orange;
height: 300px;
position:relative;
}
#footer {
bottom:0px;
}
#footer {
position:fixed;
display:block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
#betterFooter {
position:absolute;
bottom: 0px;
display:block;
width: 100%;
background: rgba(0, 0, 0, 1);
z-index:10;
text-align:center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
<div id="section1"></div>
<div id="section2"></div>
<div id="section3">
<div id="betterFooter">I would like to see this text on the very bottom of the webpage</div>
</div>
<div id="footer">I would like to see this text anywhere on the page but not when I scroll to the very bottom</div>
How should the footer disappear? If the footer which should disappear has a smaller z-index than the section 3 it would move under it. But I think you want to to "toggle" it, isn't it?
You can use a z-index as someone suggested. If you really want to detect the bottom of the page on scroll (if you want to use transparent footers for example), you need to add some jQuery.
Example :
$(document).ready(function() {
$(window).on('scroll', function() {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
$('#footer').hide();
} else {
$('#footer').show();
}
});
});
#section1 {
background-color: red;
height: 600px;
}
#section2 {
background-color: blue;
height: 700px;
}
#section3 {
background-color: orange;
height: 300px;
position: relative;
}
#footer {
bottom: 0px;
}
#footer {
position: fixed;
display: block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9;
text-align: center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
#betterFooter {
position: absolute;
bottom: 0px;
display: block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9;
text-align: center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section1">
</div>
<div id="section2">
</div>
<div id="section3">
<div id="betterFooter">
I would like to see this text on the very bottom of the webpage
</div>
</div>
<div id="footer">
I would like to see this text anywhere on the page but not when I scroll to the very bottom
</div>
You can achieve this by making the z-index for #betterFooter higher than the z-index of #footer. Think of z-index as a stack of papers. An element with a higher z-index means it is closer to the top of the stack than one with a lower z-index.
So your css could look something like this:
#betterFooter {
position: absolute;
bottom: 0px;
display: block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10;
text-align: center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
We made the z-index: 10 because the z-index for #footer is 9.
Check out the fiddle here http://jsfiddle.net/hb7y019n/