This question already has an answer here:
Why does perspective changes fixed position in CSS?
(1 answer)
Closed 6 years ago.
I'm running into an issue where a fixed element (The nav) moves when the body element is used as a parallax container with the following css:
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y:auto;
}
Where the original body element has this css:
html,body {
width: 100%;
margin: 0px;
margin-bottom: -1.4rem;
overflow-x: hidden;
display: block;
font-size: 10px;
}
And the original nav has this css:
nav {
position: fixed;
top: 0rem;
right: 0rem;
height: 100%;
/*animation*/
transition-timing-function: all ease 0.3s;
-webkit-transition: all ease 0.3s; /* Safari */
transition: all ease 0.3s;
}
Where the fixed position style only breaks when the parallax class is applied to the body element.
All of this is within this representation of the html:
<body class="parallax">
<header></header>
<div></div>
<nav></nav>
</body>
Why did it break?
Edit to clarify some confusion: no javascript is involved, the parallax container class is shown above, nothing else has been added. Upon inspection, the nav element still has the fixed position style applied to it
Here is the fiddle
(As an aside, I know the work-around is to add parallax to a different container instead, and have the nav outside of that container, but in order to make sure iOS shrinks the url bar the body needs to be the element that scrolls)
The issue is due to perspective being added via the .parallax class.
This cannot be overcome.
Any time you add transform (which is what perspective is) to an element, it becomes the positioning "base" for any positioned children, including position: fixed. Your position:fixed nav element becomes fixed relative to the transformed parent
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
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;}
I'm trying to achieve the following in IE9, IE10, and IE11 (works perfectly on Chrome and FF):
In mobile mode, I have a main #container wrapper that holds the entire site contents and a nav side menu div which is inside the #container (cannot be moved out, btw), yet is not visible and is hidden off-screen. When a user clicks a menu open toggle button, it should slide the #container to the right, revealing the nav side menu div directly positioned to its left. The "sliding" is happening using translateX, which gets assigned as soon as the "open" class gets applied to it via the toggle. In the IEs, I'm getting the animation part as expected, but without a visible side nav (empty space only).
#container {
height: 100%;
position: relative;
transition: transform ease .5s;
width: 100%;
}
#container.open {
position: fixed;
transform: translateX(300px);
}
#nav-side-menu {
left: -300px;
height: 100%;
overflow: scroll;
position: fixed;
top: 0;
width: 300px;
}
The problem here is with the use of position: fixed inside a transformed element. Per the specification, when using fixed-positioned elements ...the containing block is established by the viewport. There is a debate as to whether transformed elements should be the containing block of fixed descendants, but Internet Explorer doesn't presently support this.
In this particular instance you could avoid the cross-browser complications by avoiding CSS Transforms altogether. Instead, try moving the containing element laterally using the left property. Below is my markup — which I believe to be a reasonable reflection of yours:
<article>
<nav>
<p>This is the navigation portion.</p>
</nav>
<section>
<p>This is the content portion.</p>
</section>
</article>
As described above, the following approach makes key use of a relatively positioned container, moved side-to-side by transitioning (supported since IE10) the left property. We're also using the calc function (supported since IE9) to determine better dimensions and offsets:
body {
margin: 0;
overflow-x: hidden;
}
article {
left: -300px;
position: relative;
transition: left 2s;
box-sizing: border-box;
width: calc(100% + 300px);
padding: 0 1em 0 calc(300px + 1em);
}
article.open {
left: 0px;
}
nav {
position: fixed;
width: 300px; height: 100%;
margin: -1em auto auto calc(-300px - 1em);
}
This approach yields a more consistent experience across both Internet Explorer, Chrome, and Firefox. The end-result can be viewed online here: http://jsfiddle.net/jonathansampson/vxntq8b1/
Using bootstrap and trying to do a little simple css animation on hover, expanding the element to highlight it.
.text-block {
background-color: white;
min-height: 400px;
text-align: center;
transition: .1s;
margin: 1em;
}
.text-block:hover {
margin: 0em;
transition: .1s;
z-index: 99;
}
This almost looks right, as the element appears to be expanded since the margin is animated away, but it moves up the page so it appears only 3 sides of the element grow.
Is it possible to set the height on hover to the non-hover height+2em to make it appear to grow 1em in all directions within CSS?
Change margin to padding. Margin adds blank space outside of your element. Padding should give you the effect you want :D
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.