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;
Related
I would like to add a tooltip inside a split screen. I have try many combination like this one, but all of them failed. My tooltip is always hidden behind the second "screen"
Here is my code so far
<!DOCTYPE html>
<style>
a-leftcolumn {
width: 8%;
background: #EFF0F1;
overflow-y: auto;
overflow-x: scroll;
position: absolute;
top: 0px;
left: 2px;
bottom: 0px;
padding-left: 3px;
font-size: 10px;
}
a-main {
width: 90%;
overflow: auto;
position: absolute;
top: 0px;
left: 9%;
bottom: 0px;
}
/* tooltip https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden*/
.has-tooltip {
/*position: relative;*/
display: inline;
}
.tooltip-wrapper {
position: absolute;
visibility: hidden;
}
.has-tooltip:hover .tooltip-wrapper {
visibility: visible;
opacity: 0.7;
/*top: 30px;*/
/*left: 50%;*/
/*margin-left: -76px;*/
/* z-index: 999; defined above with value of 5 */
}
.tooltip {
display: block;
position: relative;
top: 2em;
right: 30%;
width: 140px;
height: 96px;
/*margin-left: -76px;*/
color: #FFFFFF;
background: #000000;
line-height: 96px;
text-align: center;
border-radius: 8px;
box-shadow: 4px 3px 10px #800000;
}
.tooltip:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
/* end tooltip */
</style>
<body>
<a-leftcolumn>
<a class="has-tooltip" href="#">Hover me for Tooltip
<span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
</a-leftcolumn>
<a-main>
Some text
</body>
</html>
If you need to have scrolling inside the left column, your best bet is to find a way to have the tooltip exist outside the the element - not as a child, but as a sibling.
<body>
<tooltip></tooltip>
<left-column></left-column>
<right-column></right-column>
</body>
Change a-leftcolumn overflow to visible; The tooltip is hidden because of the overflow rules you set. Overflow generally hides stuff inside of the element unless you set it to visible, which is also the default btw so you can probably remove this rule entirely.
<!DOCTYPE html>
<style>
a-leftcolumn {
width: 8%;
background: #EFF0F1;
overflow: visible; /* Change overflow to VISIBLE */
position: absolute;
top: 0px;
left: 2px;
bottom: 0px;
padding-left: 3px;
font-size: 10px;
}
a-main {
width: 90%;
overflow: auto;
position: absolute;
top: 0px;
left: 9%;
bottom: 0px;
}
/* tooltip https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden*/
.has-tooltip {
/*position: relative;*/
display: inline;
}
.tooltip-wrapper {
position: absolute;
visibility: hidden;
}
.has-tooltip:hover .tooltip-wrapper {
visibility: visible;
opacity: 0.7;
/*top: 30px;*/
/*left: 50%;*/
/*margin-left: -76px;*/
/* z-index: 999; defined above with value of 5 */
}
.tooltip {
display: block;
position: relative;
top: 2em;
right: 30%;
width: 140px;
height: 96px;
/*margin-left: -76px;*/
color: #FFFFFF;
background: #000000;
line-height: 96px;
text-align: center;
border-radius: 8px;
box-shadow: 4px 3px 10px #800000;
}
.tooltip:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
/* end tooltip */
</style>
<body>
<a-leftcolumn>
<a class="has-tooltip" href="#">Hover me for Tooltip
<span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
</a-leftcolumn>
<a-main>
Some text
</body>
</html>
Question:
Is it possible to prevent this behaviour?
What I tried:
Changing Z-index and searching forums. Challenge is prober key-words for prober search. Mostly get hits about preventing scroll behind fixed divs.
A few JS suggestions but all with flicker.
Real-world application:
Nav/close not preventing scroll on hover.
HTML
<div class="box">
<div class="nav">nav (close)</div>
More text in full example. (lorem ipsum)
</div>
CSS
.nav {
position: fixed;
top: 80px;
right: 80px;
padding: 50px;
background-color: pink;
border: 3px solid red;
}
.box {
position: fixed;
top: 50px;
right: 50px;
left: 50px;
bottom: 50px;
border: 3px solid red;
overflow: scroll;
}
https://jsfiddle.net/johnmichealsen/nyo5Lzck/8/
How about using position sticky instead of fixed? This would require an added container element of some sort wrapping the text content.
https://jsfiddle.net/Lmp6bagq/
.nav {
position: sticky;
top: 80px;
right: 20px;
float: right;
width: 200px;
padding: 50px;
background-color: pink;
border: 3px solid red;
z-index: 1;
}
.content {
position: absolute;
width: 100%;
}
.box {
position: fixed;
top: 50px;
right: 50px;
left: 50px;
bottom: 50px;
border: 3px solid red;
overflow: scroll;
}
Add this CSS styling to your fixed div to allow scrolling while hovering over the nav element.
pointer-events: none;
The downside to this solution is that you'll no longer be able to click on the element to use it as a button.
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 6 years ago.
I am trying to centre a DIV which contains a form. I have managed to grey out the back ground and would like to centre the form within the window. Below is what I have done so far, but I do not know how to progress it further to get the result that I need.
I am able to 'auto margin' horizontally, but I am not able to do this vertically (please see image). If you stretch the browser window further vertically, the form stretches to occupy all of the vertically space.
#idOfForm{
margin: auto;
z-index: 10000;
position: absolute;
background-color: white;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
width: 500px;
min-height: 250px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 3px 3px 3px #b8b8b8;
font-family: sans-serif;
color: #484848;
}
This is how you can center elements easily:
Suppose you have the following:
<div class="aaa">
fsdfsd
</div>
Use the following css:
.aaa {
transform: translate3d(-50%, -50%, 0);
position: absolute;
top: 50%;
left: 50%;
}
Here is jsfiddle: https://jsfiddle.net/ffnvjz4q/
This is the code you need:
#idOfForm{
transform: translate3d(-50%, -50%, 0);
z-index: 10000;
position: absolute;
background-color: white;
top: 50%;
bottom: 0;
left: 50%;
right: 0;
padding: 10px;
width: 500px;
min-height: 250px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 3px 3px 3px #b8b8b8;
font-family: sans-serif;
color: #484848;
}
What browsers does your 'app' must support ? The easiest way to achieve this is using CSS flexbox but it is not fully support yet
http://caniuse.com/#search=flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
<div class="modal">
<div class="modal-body">
<!-----put your form code here --->
</div>
</div>
.modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index: 2;
}
.modal-body {
position: relative;
max-width: 500px;
width: 100%;
margin: 50px auto 20px;
background-color: #fff;
min-height: 50px;
}
You could try
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
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 jsp page as shown below
When I zoom this page my tags and buttons are overlapping editor area, How can I prevent this?
I don't want buttons to come over editor even on zoom.
My CSS code
#editor {
position: absolute;
top: 0;
right: 20%;
bottom: 0;
left: 0;
}
#widnow{
position: absolute;
top: 72.5%;
right: 0;
bottom: 0;
left: 3%;
}
#title_bar{
background: #FEFEFE;
height: 25px;
width: auto;
}
#button{
border:solid 1px;
width: 25px;
height: 23px;
float:right;
cursor:pointer;
}
#box{
height: 250px;
background: #DFDFDF;
}
#ul{
list-style-type: none;
}
All you need is to change all the position:absolute; to position:relative; in your css and div style..!!
DEMO