I have an overlay which should fill an entire div.
HTML:
<div class="phone">
<div class="overlay"></div>
</div>
CSS:
.phone {
position: relative;
width: 300px;
height: 500px;
padding: 15px;
background: #F2F4F5;
overflow: hidden;
cursor: default;
}
.overlay {
display: none;
background: rgba(27, 35, 41, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
I have some JS adding content to the .phone div and when content is added, it automatically scrolls to the bottom of the .phone div. However, the overlay only stretches to fit the 300x500 original size. So when it scrolls down the overlay no longer covers the entire div.
If I add position: fixed to the overlay, it fills the whole screen instead of the .phone div only.
Place the overlay outside of the .phone div so that it is a child of the body element. Then set the Body to position relative.
HTML
<body>
<div class="overlay"></div>
<div class="phone"></div>
</body>
CSS:
body {
position:relative;
}
.overlay {
display: none;
background: rgba(27, 35, 41, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.phone {
width: 300px;
height: 500px;
padding: 15px;
background: #F2F4F5;
overflow: hidden;
cursor: default;
}
If you give him position fixed he will be :
top: 0;
bottom: 0;
left: 0;
right: 0;
To the body and not your div if you want him to take the full size of his parent you give him
height:100%;
width:100%;
.phone {
position: relative;
width: 300px;
height: 500px;
padding: 15px;
background: red;
overflow: hidden;
cursor: default;
}
.overlay {
/* display: none;*/
background: pink;
position: absolute;
/*top: 0;
bottom: 0;
left: 0;
right: 0;*/
height:100%;
width:100%;
z-index: 1;
}
<div class="phone">
<div class="overlay"></div>
</div>
Related
I have an absolute-positioned div with two children -- an absolute-positioned div and a static div which will scroll inside the parent. It looks like this:
<div class='frame'>
<div class='absolute-contents'>This should stay put.</div>
<div class='static-contents'>This should scroll under it.</div>
</div>
And here's the CSS:
.frame {
position: absolute;
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
overflow-y: scroll;
}
.absolute-contents {
position: absolute;
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
z-index: 9999;
opacity: .9;
padding: 40px;
}
.static-contents {
margin: 24px auto;
width: 400px;
height: 3000px;
padding: 40px;
}
I have the absolute child constrained to the edges of the parent, so why does it still scroll, and how can I make it stay put?
Example: https://codepen.io/anon/pen/wqZxXG
I resolved by putting the element I wanted to scroll in an absolute-positioned div with overflow-y: scroll like so:
<div class='frame'>
<div class='fix-me'></div>
<div class='scroll-me'>
<div class='long-content'></div>
</div>
</div>
And styling like this:
.frame {
background-color: blue;
position: absolute;
top: 40px;
right: 40px;
left: 40px;
bottom: 40px;
overflow-y: hidden;
}
.scroll-me {
background-color: orange;
position: absolute;
top: 40px;
right: 40px;
left: 40px;
bottom: 40px;
overflow-y: scroll;
}
.fix-me {
position: absolute;
z-index: 999;
top: 40px;
left: 40px;
right: 40px;
height: 56px;
background-color: purple;
}
.long-content {
width: 480px;
background-color: yellow;
height: 4000px;
margin: 20px auto;
}
Pen here: https://codepen.io/dustinlocke/pen/vJMzpK
You should adjust your child div to use position: fixed if you do not want it to move. position: absolute just tells a div that its initial position should be determined absolutely. See my answer here for more info on position: fixed and a similar scenario to yours.
Set the .frame div to position: relative (or a parent of .frame) for this to work. This will set the position: fixed child to be fixed within the position: relative parent of .frame.
You will need to adjust the positioning amounts (top, bottom, left, right) to account for the different stacking contexts.
Something like this: https://codepen.io/anon/pen/brJxVW
body {
width: 100vw;
}
.frame {
background-color: green;
position: relative;
width: calc(100vw - 80px);
margin: 0 auto;
top: 40px;
bottom: 40px;
overflow-y: scroll;
}
.absolute-contents {
background-color: yellow;
position: fixed;
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
z-index: 9999;
opacity: .9;
margin: 40px;
}
.big-contents {
margin: 24px auto;
width: 400px;
height: 3000px;
background-color: white;
padding: 40px;
}
<div class='frame'>
<div class='absolute-contents'>This should stay fixed in the green frame. Why is it scrolling?</div>
<div class='big-contents'>This should scroll under it.</div>
</div>
Please look at the following fiddle:
https://jsfiddle.net/a9ravkf5/3/
#navbar{
position: fixed;
top: 0;
left: 0;
height:40px;
background-color: grey;
width: 100%;
}
#sidebar{
position: fixed;
top: 40px;
left: 0;
z-index: 0;
height:100%;
width: 200px;
background-color: black;
}
#dropdown{
position: absolute;
top: 0px;
left 0px;
width: 500px;
color: #fff;
z-index: 10;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: blue;
}
#content{
position: absolute;
top: 40px;
left: 200px;
right: 0px;
min-height: 300px;
background-color: green;
}
<div id="navbar">
</div>
<div id="sidebar">
<div id="dropdown">
This is a very long sentance that should be visible in its entirety.
</div>
</div>
<div id="content">
</div>
I want to make the blue element larger (wider) than the fixed position parent element. It is going to be a dropdown for selecting option inside the sidebar, and i want it to expand the the content inside and not wrap to multiple lines (larger height).
What is the best solution for doing this?
Your child div is larger than the containing fixed div.
The reason you can't see all of it is because your #content div is shown in front of your fixed #sidebar div.
Try adding a z-index to the #sidebar and #content divs like so:
#sidebar {
position: fixed;
top: 40px;
left: 0;
z-index: 0;
height: 100%;
width: 200px;
background-color: black;
z-index: 2; // Here we give the sidebar a larger z-index resulting in it being showed on top of the content.
}
#content {
position: absolute;
top: 40px;
left: 200px;
right: 0px;
min-height: 300px;
background-color: green;
z-index: 1; // Here we give the content a lower z-index resulting in it being showed beneath the sidebar.
}
#navbar {
position: fixed;
top: 0;
left: 0;
height: 40px;
background-color: grey;
width: 100%;
}
#dropdown {
position: absolute;
top: 0px;
left 0px;
width: 500px;
color: #fff;
z-index: 10;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: blue;
}
<div id="navbar"></div>
<div id="sidebar">
<div id="dropdown">
This is a very long sentance that should be visible in its entirety.
</div>
</div>
<div id="content"></div>
Is this what you need?
You need to set appropriate z-index on your content div and sidebar.
#navbar{
position: fixed;
top: 0;
left: 0;
height:40px;
background-color: grey;
width: 100%;
}
#sidebar{
position: fixed;
top: 40px;
left: 0;
z-index: 10;
height:100%;
width: 200px;
background-color: black;
}
#dropdown{
position: absolute;
top: 0px;
left 0px;
width: 500px;
color: #fff;
z-index: 10;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: blue;
}
#content{
position: absolute;
top: 40px;
left: 200px;
right: 0px;
z-index: 0;
min-height: 300px;
background-color: green;
}
<div id="navbar">
</div>
<div id="sidebar">
<div id="dropdown">
This is a very long sentance that should be visible in its entirety.
</div>
</div>
<div id="content">
</div>
you need to set two things
one is your 'z-index', in #sidebar .
and another one is 'min-height' in #content.
like
#sidebar{
position: fixed;
top: 40px;
left: 0;
z-index: 10;
height:100%;
width: 200px;
background-color: black;
}
#content{
position: absolute;
top: 40px;
left: 200px;
right: 0px;
min-height: 400px;
background-color: green;
}
and if you want to fix it then also add z-index:-1; in #content
As demonstrated here: http://codepen.io/anon/pen/rVPqeL
I am using 3 simple divs and I want to obtain an effect of a "global" scrollbar that has to go over the header.
The html is very basic
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
</div>
and here's the css:
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
overflow-y: scroll;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
}
.content {
margin-top: 50px;
min-height: 2500px;
background-color: blue;
}
The scrollbar keeps going under the header div. What am I doing wrong?
The below code does the trick
http://codepen.io/anon/pen/XbOxgp
.container {
background-color: gray;
overflow-y: scroll;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
z-index: 2;
}
.content {
z-index: 1;
width: 100%;
position: absolute;
top: 60px;
min-height: 2500px;
background-color: blue;
}
If I understand correctly you want the scrollbar always ontop. To do so change your css to the following
html{
overflow-y: scroll;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
}
Scroll on html will allow the entire page to have scroll while keeping header static and remove scroll from container.
.container {
margin-top:50px; /* create room for header*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
overflow-y: scroll;
}
.header {
margin-top:-50px; /* move up by 50px*/
position: fixed;
width: 100%;
height: 50px;
background-color: red;
}
fixed positioned elements have "no width and height".
Hope it helps :)
EDIT: See this pen: This
Ps. I guess you also want to remove the margin of .content
i tried with replacing position:fixed with position:sticky and added top:0 and it worked well for me, no more overlapping vertical scrollbar.
.header {
position: sticky;
top: 0;
width: 100%;
height: 50px;
background-color: red;
}
Remove overflow-y: scroll; from your .container
put the overflow-y: scroll; inside the body element:
body {
overflow-y: scroll;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
}
I am using two divs to create the look of a two-tone background. behind my container div, the left side is blue and the right side is yellow. My css for these column divs is:
#bluecol{
height:100%;
background-color: #5C8AE6;
display: inline;
float: none;
left: 0px;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
width: 50%;
z-index: -5;}
and for the yellowcol is the same, except positioned to the right, naturally. Currently both divs works fine but I cannot get them to match the height of the content within my container, I can only set the height manually or to 100%, which only takes up the browser's window. My container is set to height:max-content so is unhelpful in this situation.
I want the two column divs to match whatever the containers height is. Any suggestions would be great!
Js fiddle: https://jsfiddle.net/ak0kp9xd/
Try like this: Demo
html, body {
height: 100%;
overflow: hidden;
position: relative;
}
#bluecol {
height:100%;
background-color: #5C8AE6;
display: inline;
float: none;
left: 0px;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
width: 50%;
z-index: -5;
}
#yellowcol {
height:100%;
background-color: rgb(255, 204, 0);
display: inline;
float: none;
right:0px;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
width: 50%;
z-index: -5;
}
#container {
background-color:#E5ECFB;
font-family:'calibri';
margin:10px;
overflow:hidden;
z-index:5;
font-size:medium;
height: 100%;
}
Your background blocks must be inside #container to take it's height.
Also you can use :before to reduce HTML markup:
#container {
position: relative;
background-color: rgb(255, 204, 0);
padding: 10px;
}
#container:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
background-color: #5C8AE6;
display: block;
z-index: 1;
}
#container .content {
position: relative;
z-index: 10;
background-color: #E5ECFB;
border-right: 11px solid #FFE994;
border-left: 11px solid #AFC6F3;
}
<div id="container">
<div class="content">Whatever</div>
</div>
I have a div (fixed) which acts like a pop up:
<body>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
</body>
This css allows the container to be horizontally centered (having a 100% width makes everything behind it unclickable; thus, I set it to 1px):
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 1px;
z-index: 9999;
}
.popup-item {
display: block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
However, I am unable to center .popup-item due to the parent element .popup-container being smaller than its child. How do I center .popup-item while still being able to click it (pointer-events: none entirely disabled it)?
Vote to Close almost has it, but with the 1px width, the element doesn't get centered.
Do this instead:
.popup-container {
position: fixed;
left: 0;
right: 0;
z-index: 9999;
text-align:center;
height:0px;
}
.popup-item {
display: inline-block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
This will make it centered, because the container is 100% wide. However, pointer-events:none; will allow you to click through to anything below it.
A couple of solutions.
First, you can make the child of the container centered using translateX() transform: http://jsfiddle.net/Yjz5R/. The same effect can be accomplished using negative margins, but the width for the container's child has to be set: http://jsfiddle.net/9Qmza/.
CSS:
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
Or second, you can make the container "immune" to click events:
Markup:
<input type = "checkbox" id = "clickToggle" />
<label for = "clickToggle">Click me</label>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
Styles: http://jsfiddle.net/CVfHt/.
.popup-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(200, 200, 200, 0.5);
pointer-events: none;
}
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: all;
}
input[type = "checkbox"] {
display: none;
}
input[type = "checkbox"] + label {
cursor: pointer;
}
input[type = "checkbox"]:checked ~ div {
display: none;
}
Lastly, a question/comment. If you do not want the container to be visible, then why use it at all? Just keep the markup of the child and get rid of the container: http://jsfiddle.net/yvc4E/.
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto; /* remove this line - unnecessary*/
margin-right: auto; /* and this line, remove */
width: 1px;
z-index: 9999;
text-align: center; /* add this */
}
.popup-item {
display: inline-block; /* change to inline-block */
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}