I'm placing a fixed position modal inside a relatively positioned element with no transforms and with overflow: auto.
The problem is that when there is overflow on the parent, the modal's backdrop does not cover the scrollbars - please look at the picture attached for an example.
The scrollbar should also be covered by the semi-transparent black backdrop, but for some reason it is not. Does anyone know why, and/or how I may go about fixing this?
I want to avoid using absolute positioning for the modal container because it can be a nested element in any arbitrary hierarchy.
Here is my css for the .modal-container class which includes the backdrop.
.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
opacity: 1;
transition: all .1s;
display: flex;
z-index: 200;
justify-content: center;
align-items: center;}
Related
I am creating the following side menu with animation: click
We can see an unwanted horizontal scrollbar, which should not be according to developer.mozilla.org,
absolute
The element is removed from the normal document flow, and no space is
created for the element in the page layout.
In the example above, the list of menu appears when you click on the checkbox and it has the class .m-list. .m-list has absolute positioning and relative positioning is set for its nearest parent(.m-block). I'm going to copy and paste these two classes
.m-block {
width: 100%;
background: gray;
padding: 0;
display: flex;
flex-direction: row-reverse;
position: relative;
}
.m-list {
position: absolute;
top: 100%;
background: silver;
right: 0;
width: auto;
list-style-type: none;
transform: translateX(0%);
transition: transform 0.25s ease-out;
}
Q1: Why does the horizontal scrollbar appear?
Q2: What is the most correct solution to prevent the appearance of a horizontal scrollbar?
I know 4 ways to solve this problem, but due to various reasons I do not want to use them:
If I change the absolute position to a fixed one, it does not generate a horizontal scrollbar, but the rule line with top: 100%; takes on a different meaning. In the original case, top: 100%; provides an offset from the blue stripe along its height.
Using JS is not available in this project
Using overflow-x: hidden on the top level of document will disable the scrollbar, which may be needed for content.
Moving the menu from the right side to the left will not result in a horizontal bar, however, this is an undesirable solution.
.m-list {
...
left: 0;
transform: translateX(0%);
}
#m-toggle:checked ~ .m-list {
...
transform: translateX(-100%);
}
I tried applying overflow-x: hidden; to <body>. and I was able to scroll down and hide the menu
This question already has answers here:
Why does position:relative; appear to change the z-index?
(2 answers)
Closed 2 years ago.
I was building a modal, and I was having problems keeping the background behind the main content.
They were on the correct hierarchy for them being painted correctly: the ones behind comes first.
The problem was that the absolute position background was "hidding" the content, despite the content should be painted after and therefore in front.
Suddenly I realised that adding position relative to the content make it render on top of the background, so the background-color of the background was not "masking" it anymore.
Here is a fiddle where you can see how the content with the position absolute has the correct colors, while the one with normal position has it's colors tinted red.
.main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(100, 0, 0, 0.55);
}
.content {
background-color: lightblue;
padding: 1rem;
position: relative;
}
.norelative {
background-color: lightblue;
padding: 1rem
}
<div>
Just some basic text
</div>
<div class="main">
<div class="background"></div>
<div class="content">Content</div>
<div class="norelative">No relative</div>
</div>
https://jsfiddle.net/danielo515/x3u2Lth7/11/
How is this possible? How can position relative affect this layering problem?
It's all about stacking contexts. Using a position property that isn't static (the default) makes the element render on top of anything else that is static. So, your background renders on top of the static norelative div, but since the relative div isn't static, it follows the normal rendering order and renders on top of the background.
See stacking context for more details.
I have the below Ionic application example in Stackblitz. You'll see that there are a custom Angular component called <my-video></my-video>, an ion-list and a button. What I want is:
Put the ion-list on top of the video. This way, the ion-list overlaps the video.
Put the button under the video.
This is what I have now, you can see the code in the Stackblitz example (including the CSS code):
I think the problem can be that video-container hasn't the same height as its children my-video, but I don't know why.
I tried with different positioning configurations (position relative, absolute , static, etc.) with no effect.What would be the correct way to achieve this?
I believe the problem is that my-video is absolutely positioned, meaning it is taken out of the natural flow of positioning and positioning the button anywhere based on my-video very tricky, which is not what we want, so you need to make my-video's positioning relative, keep the options-list position absolute but also add top: 0 and left: 0, like so
.video-container {
position: relative;
my-video {
position: relative;
width: 100%;
background-color: red;
}
.options-list {
position: absolute;
top: 0;
left: 0;
}
}
.finish-button-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 32px;
position: relative;
}
now the button can go to the bottom of the screen because my-video is in the flow of positioning
Updated the stackblitz with the following css for your button :
position: absolute;
top: 40%;
left: 50%;
right: 50%;
You need to use position: absolute here in order to get your button's position relative to the .video-container div.
When the image grows in hover to 350px it pushes everything around.
This code is working except that when I hover and the picture grows it pushes the menu or what ever is around downwards.
How can I stop this?
#displaycar img
{
height: 200px;
}
#displaycar img:hover
{
height: 350px;
}
BTW I'm using twitter bootstrap and I have tried position: absolute;.
Is there any way to still increase size when hover but don't push nothing don't move nothing.
Set the height of #displaycar (the presumed parent div) to 200px and add overflow: visible;
#displaycar {
height: 200px;
overflow: visible;
}
I would use z-index on the elements. keep the values equal on the initial layout, but make it a stronger (bring to front) value when hovering
#displaycar img:hover
{
z-index:[stronger value];
height: 350px;
position :[relative, absolute, fixed];
}
note: to use z-index, you have to use one of the position values
Z-index gives priority to overlapping elements (bring to front / bring to back)
here is a bit more info on the subject
It's possible, but to avoid affecting surrounding content the element itself has to be removed from the flow of the document; this is easiest to achieve using position: absolute, though unfortunately this requires using a wrapping element, with position: relative (or any other non-static position value). The wrapping element has to have a width and height defined, which could be done automatically (with JavaScript, or PHP (amongst many other options)).
For example, the HTML:
<span>
<img src="http://placekitten.com/400/400/" />
</span>
<p><!-- generic dummy content, excised for brevity --></p>
And the CSS:
span {
display: inline-block;
position: relative;
width: 150px;
height: 150px;
}
span img {
position: absolute;
top: 0;
left: 0;
height: 150px;
width: 150px;
/* Vendor-prefixes removed, for brevity */
transition: all 1s linear;
}
span:hover img {
width: 400px;
height: 400px;
/* Vendor-prefixes removed, for brevity */
transition: all 1s linear;
}
JS Fiddle demo.
i have created a website but now i am having 1 issue. i am unable to do click even on link and navigation.
you can take a look:
http://www.cambridgekitty.com/business-directory/
to check the real codes.
HTML
<div id="main-bg">
<div id="left-side-logo"></div>
</div>
CSS
#wrap {
padding: 0;
position: relative;
width: 100%;
}
#main-bg {
background: url("../img/kittybg2-h.png") no-repeat scroll right top transparent;
margin: 0 auto;
min-height: 733px;
position: relative;
width: 100%;
z-index: -9999;
}
just add a logo on left side
#left-side-logo {
background: url("../img/norwichkitty-final-logo-bg-02.png") no-repeat scroll 0 0 transparent;
height: 500px;
left: -150px;
opacity: 0.8;
position: absolute;
top: -60px;
width: 500px;
z-index: -1;
}
and add
position: relative;
to #wrap. and add
z-index: -9999;
to #main-bg.
but after doing this ... i am unable to click on logo or even navigation links.
please let me know why i am casusing this issue.
thank you
Don't use a negative z-index if you don't know exactly what you're doing. Use a positive value and just set #left-side-logo's z-index to a value even higher.
Since #wrap has a negative z-index, it's placed behind the content of #inner-wrapper in the latter's stacking index.
See also:
W3C: CSS2.1: 9 Visual formatting model (Section z-index)
If I were you, I would simple change the elements I apply the different background images to. Give #inner-wrapper the city image background, and #main-bg the logo background. Then use the background-position property to position the logo background (currently the two zeroes in your background rule). Also, if you want opacity for that logo you can achieve that by simply setting it in Photoshop or whatever editor you prefer.
This solution means you don't have to deal with the z-index issues and makes for more hack-free and semantic mark-up, although you do have a few containers. Hope this helps :)