I used a position:fixed div with overflow: auto; as a transparent div in the back of some pop up.
The problem is when I scroll to see this pop up bottom or top, this overlap appears.
How could I keep using this div as a background with the ability to scroll without this overlapping?
HTML
<div class="popup_screen_bg">
<div class="popup_screen">
<!-- update partner "form" -->
</div>
</div>
CSS
.popup_screen_bg{
position: fixed;
min-width: 100%;
min-height: 100%;
height: auto;
z-index: 1000;
overflow: auto;
background: url('popup_transparent.png');
padding-bottom: 20px;
}
.popup_screen{
position: absolute;
min-width: 80%;
min-height: 80%;
left: 10%;
top: 10%;
background-color: #EEE;
border: 8px solid rgba(0, 0, 0, 0.5);
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
}
Note: This problem appears only in Chrome.
. You can see that it is scrolled down in google chrome, and there is no overlap. Maybe there's another reason? Or maybe it's just a glitch, since you said it is working on all other browsers. If you also look in the right, there are your styles, and your div is at the top of the interior of <body>.
Related
I have a simple Dropdown and a sticky container to the right. The dropdown keeps going behind the sticky container as such:
I tried:
changing the right container to position fixed
changing z-index of both divs
However, these did not work. This is my codepen
The dropdown with position absolute is article-actions-dropdown-content
The sticky container is right-sidebar-container.
Sticky element:
.right-sidebar-container {
height: 550px;
width: 98%;
background-color: red;
display: block;
margin-left: auto;
margin-right: auto;
top: 20%;
margin-top: 10px;
position: sticky;
margin-bottom: 20px;
transition: 0.5s;
}
Absolute element:
.article-actions-dropdown-content {
position: absolute;
background-color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
min-width: 160px;
overflow: auto;
border: 1px solid #ebebeb;
border-radius: 4px;
opacity: 0;
transition: opacity 0.1s ease-in;
overflow: hidden;
visibility: hidden;
}
Try adding z-index: 1 to the element with class article-actions-dropdown-wrapper.That is,
.article-actions-dropdown-wrapper{
z-index: 1
}
tried on your codopen, the dropdown menu is nested inside the wrapper that is nested already, just apply the z-index:1000; on the .article-actions-dropdown-wrapper and z-index:0; on .right-sidebar-container
z-index use to start the unit count of a nested element 100 or 10 (don't remember) unit less compared to an higher one then you have to insert higher numbers
You should take z-index:1 for the class .article-actions-dropdown-content because it will prioritize the sticky menu.
I am trying to centre a DIV (form) based on the presently viewable browser space, and one that takes into account how far up or down a page I have scrolled. I would like the form centred as and when I press a button. My attempt is below. The problem with my attempt is that if I have scrolled down a page far enough for instance, the form is not entered, but is centred if I scroll all the way up the page again.
If I have scrolled down the page, and want the form to appear, the first image shows what i get.
If I am at the top of the page, then the form is properly centred.
PS:- No jQuery solutions please
CSS for div #docForm
#docForm {
font-family: sans-serif;
border: 1px solid #ccc;
width: 600px;
padding: 10px;
height: 425px;
transform: translate3d(-50%, -50%, 0);
z-index: 10000;
position: absolute;
background-color: white;
top: 50%;
bottom: 0;
left: 50%;
right: 0;
border-radius: 10px;
box-shadow: 3px 3px 3px #b8b8b8;
color: #484848;
}
#docForm {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
or if you want to use flex, create a div with class formContainer, put your form inside of it and then:
.formContainer {
position: fixed;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
Since you have a fixed width and height, you can do this by setting the left and top to the center of the screen, then offsetting the container by half of it's width and height:
#docForm {
width: 600px;
height: 425px;
border: 1px solid #ccc;
padding: 10px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -311px /* -(width + padding*2 + border_width*2) / 2) */
margin-top: -223px /* -(height + padding*2 + border_width*2) / 2) */
}
All settings not relevant to the solution omitted in this answer, however note that you must not set right or bottom, or you will get unintended results.
In contrast to using flexbox or translate, this will be compatible with browsers that don't support CSS Level 3.
I am having issues placing my dT(Date/Time) div at the bottom of it's containing div. I have tried setting bottom: 0px; to no avail. Below is the html and css code I am using.
HTML:
<div class='container'>
<aside>
<img id="user-pic" src="images/blank-user.jpg">
#User_Name
<div id="trend"><h6>TRENDING</h6></div>
</aside>
<section class="main">
</section>
</div>
CSS:
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
}
.container{
margin-top: 80px;
}
section{
margin: auto;
width: 400px;
clear: left;
top: 100px;
}
.tweet{
width: 450px;
height: 225px;
background-color: #FFFFFF;
border: 4px solid #F1433F;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 15px;
padding: 25px 15px 0px 15px;
}
.tweetContent{
width: inherit;
height: inherit;
margin: 5px 5px 0 5px;
border-bottom: 1px solid #EEEEEE;
border-top: 1px solid #EEEEEE;
}
There is some JQuery elements within my code that I have not poseted because I do not believe it would have any effect on the positioning of a div.
It appears that the jquery aspect of the code might have something to do with it so here it is.
UPDATE: removed JQuery because it was not relevant.
Add position:relative to parent of your #dT element . Only if it is relative you can control the child elements using left , right , bottom and top.
Update:
And to the child elements for which you want to change position using left add position:absolute
P.S : Need to add relative for the div that contains #dT and absolute for #dT
#parentofdT
{
position:relative;
}
#dT
{
position:absolute
}
Easily pixed with position:absolute;: https://jsfiddle.net/1Lsnjou9/
Good luck.
You should add position: relative or position: absolute property to make the bottom: 0px work
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
position: relative;
}
use position property like position absolute or position relative so as to work with top, left,right,bottom properties
So I want my div background to scroll be the height of the window even when you scroll down.
However It seems to only be the height of the original window size. When I scroll down I am seeing the background of my body.
I've searched this site for similar questions and all I'm finding is to use height: 100%;
but that is not working.
Here is my CSS code:
div#graycontainer {
margin: auto;
margin-top: 50px;
width:1000px;
background-color: #D9D9D9;
height: 100%;
/*box-shadow: 10px 10px 7px #888888;*/
/*border: 3px solid #888889;*/
border-radius: 1px;
}
I don't believe there is any problem with my other code and using this site as a last resort.
Thanks for any help!
Using height: 100%; will only create the image with the height of the browser. What you want to do is something that doesn't depend on the scroll position. In the case that you want the image to stay in place on scroll, you might use position. First use position: fixed; This will set the image at its very position. And after that you can use the z-index to make sure it stays above the background. Use this:
#image_at_back {
margin: auto;
margin-top: 50px;
width:1000px;
background-color: #D9D9D9;
height: 100%;
/*box-shadow: 10px 10px 7px #888888;*/
/*border: 3px solid #888889;*/
border-radius: 1px;
position: fixed;
z-index: -1; // to make it a background
}
You can read more here.
When you add the fixed position, try to add some text to make the scroll bar visible. Then when you scroll it, the image stays at its position.
How can I positionate a fixed element at the left side of the div with processing resize events?
Here's example: http://jsfiddle.net/yHErk/10/
Now on my screen resolution .skicked is right at the left side of .container. But if I'll simply resize the result window, it'll change. Is there a simple way to do that thing I want?
Thank you.
Currently your .sticked div has no relative parent to hold it so it is moving according to the re-size.
Add .sticked div inside the container div.
CSS
.container {
width: 300px;
margin-left: auto;
margin-right: auto;
border: 1px solid;
background: #dedede;
padding: 10px; position:relative
}
.sticked {
position: absolute;
top: 100px;
left: -50px;
border: 1px solid;
border-radius: 5px;
padding: 10px;
background: white;
}
​DEMO