Currently I have a container with a hover overlay that darkens the entire container. I wish to show an edit button alongside the overlay right in the middle.
.service-inner {
text-decoration: none;
color: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pale-grey;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.service-inner:hover > .overlay {
position: absolute;
display: block;
top: 0;
width: 100%;
height: 100%;
left: 0;
background-color: black;
opacity: 0.8;
z-index: 100;
}
<div class="service-inner">
<div class="overlay"></div>
</div>
What would be the best way to go about this?
Add a div class="button" on the same level as your overlay and give it the same positioning properties but a higher z-index, then activate it on hover the same as your overlay element.
.button {
display:none;
}
.container:hover > .button{
position: absolute;
display: block;
top: 50%;
width:20%;
left: 40%;
background-color: green;
color:black;
z-index: 200;
}
Related
This question already has answers here:
Fix footer to bottom of page
(14 answers)
Align DIV to bottom of the page
(6 answers)
How can I position my div at the bottom of its container?
(25 answers)
Make div stick to bottom of page
(4 answers)
how to position divs within another div
(3 answers)
Closed 3 years ago.
How can I place the red div always adjacent to the footer even footer height changes?
The bottom position calculation I mean. This is not about sticky footer or positioning footer. Also, the red div must be outside of the footer div like I have given in markup.
Example -
Thanks!
.footer {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: grey;
z-index: 1;
}
.main {
position: relative;
height: 100vh;
width: 100vw;
}
.icon {
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
<div class="main">
<div class="icon"></div>
<div class="footer">Footer</div>
</div>
One way would be to place the .icon within the .footer and set it's left-margin and top-margin to be negative half of the width/height respectively. You can also make it circular by adding border-radius: 50%.
.footer {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: grey;
z-index: 1;
}
.footer .icon {
width: 50px;
height: 50px;
background: red;
position: absolute;
margin: -25px 0 0 -25px;
left: 50%;
z-index: 2;
border-radius: 50%;
}
.main {
position: relative;
height: 100vh;
width: 100vw;
}
<div class="main">
<p>Lorm ipsum dolor sit amet</p>
<div class="footer">
<div class="icon"></div>
Footer
</div>
</div>
You can try below: Put icon div inside footer div and add margin-top:-25 (half of the height of icon) to the icon and add border-radius: 50%; to make div as circle
.footer {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: grey;
z-index: 1;
}
.main {
position: relative;
height: 100vh;
width: 100vw;
}
.icon {
margin-top: -25px;
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
border-radius: 50%;
}
<div class="main">
<div class="footer"><div class="icon"></div>Footer</div>
</div>
Place the icon div in the footer, and set the top to 0;
Also, I modified the translate rule slightly so that the div would be centered horizontally as well as vertically. Also added border-radius: 50% to make the icon round.
.footer {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: grey;
z-index: 1;
}
.main {
position: relative;
height: 100vh;
width: 100vw;
}
.icon {
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -50%);
z-index: 2;
border-radius: 50%;
}
<div class="main">
<div class="footer">
<div class="icon"></div>
Footer
</div>
</div>
I have a menu that has a png img as ::before pseudo-element, and instead of sticking next to menu items, it's going on top.
const menu_button = $('img');
const menu_nav = $('#myNav');
menu_button.click(function(){
menu_nav.toggleClass('menu_open')
});
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #d6cece;
overflow-y: auto;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 10%;
width: 100%;
margin-top: 50px;
}
.overlay a {
padding-left: 30px;
padding-bottom: 5px;
padding-top: 5px;
text-decoration: none;
font-size: 27px;
display: block;
transition: 0.3s;
font-style: italic;
color: black;
}
.overlay-content a:before {
width: 6px;
content: " ";
background-image: url(https://picsum.photos/5);
background-repeat: no-repeat;
position: absolute;
left: 18px;
top: 18px;
height: 20px;
}
.menu_open {
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://picsum.photos/100">
<div id="myNav" class="overlay">
<div class="overlay-content">
Test
Test
Test
Test
</div>
</div>
Why this behavior? It's working without the menu, but not when the elements are vertically aligned. Please check out the snippet I quickly made.
it should probably be something like this
.overlay-content > a:before {
content: "";
display: block;
background: url("https://picsum.photos/5") no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}
and then change this to
.overlay-content a:before {
width: 6px;
content: " ";
background-image: url(https://picsum.photos/5);
background-repeat: no-repeat;
position: absolute;
left: 18px;
top: 18px;
height: 20px;
}
the elements are going "on top" because you set top to 18px for all elements.
that wouldn't be a problem if the positioning context for absolute positioning, was set correctly (the a element instead of the overlay-content div).
you should set the positioning context to the a element itself:
.overlay a {
position: relative;
}
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 am trying to get my div container .home-img-text to center vertically in the middle of its parent div .home-img. I have tried setting .home-img-text to position: absolute, relative, I tried padding-top and a bunch of other things, it won't move at all from the top of its parent div.
This can be viewed at this site:
click here
I did not create a snippet because the image will not show with my parallex effect.
Does anyone see what is wrong?
CSS:
.home-img {
position: relative;
margin: auto;
width: 100%;
height: auto;
vertical-align: middle;
}
.parallax-window {
min-height: 300px;
background: transparent;
position: relative;
}
.home-img-text {
position: relative;
z-index: 99;
color: #FFF;
font-size: 4em;
text-align: center;
top: 40%;
}
HTML:
<div class="home-img">
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
<div class="home-img-text">Quality Solutions</div>
</div>
The proper way to vertically center a box model element is:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Update: this is what happens in your page:
.grand-parent {
position: relative;
width: 300px;
height: 300px;
top: 10%;
left: 50%;
transform: translateX(-50%);
overflow: visible;
border: 1px solid blue;
}
.parent {
height: 400px;
border: 1px solid red;
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
width: 100%;
}
<div class="grand-parent">
<div class="parent">
<div class="child">Quality Solutions</div>
</div>
</div>
To vertically center .child in .grand-parent instead of .parent remove position:relative from .parent.
I have a div overlay which pops up when a link is clicked, my problem is you have to scroll to click the link, then the overlay remains at the top of the page instead of the area the user is currently looking at.
You can see it here by scrolling down and clicking on any of the links e.g. 'multiple orders 'here' and the terms and conditions at the bottom.
Here is the CSS:
.black_overlay{
display: none;
position: absolute;
/*top: 0%;
left: 0%;
width: 100%;
height: 1000px; */
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 5px solid blue;
background-color: white;
z-index:1002;
overflow: auto;
}
And the JavaScript:
here
Use position: fixed on your overlay elements (.black_overlay and .white_content) instead of position: absolute;