使用CSS3变换后的溢出行为 [英] Overflow behavior after using CSS3 transform
问题描述
请检查
这里,我正在转换一个具有
.transformed
所以如果你看到,元素 transform
原始,但是下一个框不会向上移动,因为转换的元素占据流中的文字空间,它不会像 position:absolute;
但是,这是独立的概念。
>
所以你需要使用 position:absolute;
或者你的 div
因此您会看到滚动条...
Poopy IE兼容解决方案
正如你所说,好吧,是的,IE仍然会显示滚动条作为定位绝对
的元素仍然存在于相同的维度,所以这里的锻炼是什么?
-
首先,你要转换的元素设置在父容器,因此第一个问题是如果你不需要
overflow
比为什么使用<$ c $> c> auto ?您可以使用隐藏
。 -
c>到父级,并且你期望将一些内容放在变换后的元素下面,而不是更好地将变换后的元素包裹在具有相同尺寸的另一个元素中设置为
overflow:hidden;
,并确保将position:absolute;
属性移动到此块。 - 演示 -
如果仍然不开心吗?那么为什么
transform
整个元素?transform
相关图片 - 演示
Please check the demo
I have two div
s the first div
is used for showing the scroll-bar and the second div
is used for the rotation of inner contents of the div
.
My question is why scroll-bar is showing even if there is no overflow of the inner contents.
Please check the demo and tell me what I am doing wrong here and how to overcome this issue or any alternative way to achieve this.
HTML
<div style="width: 1096px; height: 434px; overflow: auto; position: relative; border:solid 5px #555555">
<div id="RotationDiv">
<img style="left: 54px; top: 337px; width: 326px; height: 422px; position: absolute;" src="http://fc01.deviantart.net/fs70/f/2012/304/6/b/walfas_custom___vending_machine_2_by_grayfox5000-d5jljhe.png" />
</div>
</div>
CSS
#RotationDiv {
-ms-transform-origin: 539px 539px;
-webkit-transform-origin: 539px 539px;
width: 434px;
height: 1096px;
overflow: visible;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
background-color:Red;
}
You are using transform
so it changes visual formatting model of an element.
From MDN:
The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.
A line again from MDN:
By modifying the coordinate space, CSS transforms change the position and shape of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms.
From W3C : 2 Module Interactions
This module defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21]. Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.
So you have a parent element with the dimensions below.
width: 1096px;
height: 434px;
Now you are transforming that element using
-webkit-transform: rotate(90deg);
So here, the element transforms visually, but not literally, in other words though you transform an element, it takes the space physically on a document just like a static element takes, it just visually transforms the element. I will share a diagram which will make you understand in a better way..
So though you transformed your element like this, but still the vertical space was taken up because of the height
of your transformed element, which did transformed visually, but not literally...
So, now what's the solution? Use position: absolute;
on the child element, and anyways you are using position: relative;
on the parent.
#RotationDiv {
-ms-transform-origin: 539px 539px;
-webkit-transform-origin: 539px 539px;
width: 434px;
height: 1096px;
position: absolute;
overflow: visible;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
background-color:Red;
}
Lets have a test case, I've the styles like below
.parent .transformed {
height: 200px;
width: 200px;
background: #f00;
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
-moz-transform-origin: 300px 300px;
-webkit-transform-origin: 300px 300px;
transform-origin: 300px 300px;
}
.parent .static {
background: #00f;
height: 200px;
width: 200px;
}
Here, I am transforming an element having class
of .transformed
so if you see, the element does transform
and am also modifying the origin, but the next box won't move up, as the transformed element take up literal space in the flow, it doesn't get out of the flow like position: absolute;
does, but well that's the separate concept.
So you need to use position: absolute;
or your div
will still take up space vertically and thus you see that scroll bar ...
Poopy IE Compatible Solution
As you commented, well, yes, IE will still show the scroll bar as the element which is positioned absolute
still exists in the same dimensions, so what's the workout here?
Firstly, you are transforming the element to set in the parent container, also, you don't need the
overflow
so the first question is if you don't needoverflow
than why useauto
? You can usehidden
.If not
hidden
to the parent, and you are looking forward to place some content beneath the transformed element, than better you wrap the transformed element inside another element with the same dimensions set tooverflow: hidden;
and make sure you move theposition: absolute;
property to this block. - DemoIf still not happy? Then why
transform
entire element?transform
relevant image only - Demo
这篇关于使用CSS3变换后的溢出行为的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!