Css 如何推出固定内容的div_Css_Overflow_Css Position

Css 如何推出固定内容的div

css

Css 如何推出固定内容的div,css,overflow,css-position,Css,Overflow,Css Position,我通过在页面底部揭幕来设置元素的动画。子元素的位置不应受到揭幕动画大小更改的影响这就是我想要的： <div> <h1>Hello stranger</h1> </div> 你好，陌生人两个元素的位置均为绝对值，顶部、右侧、底部和左侧设置为0。通过将div的top从100%降低到0%来显示内容。祝你好运我的目标是将航向始终保持在固定位置（中间）在标题尚未打开时隐藏标题但这些是我的问题（包括小提琴）当使用位置时：对于h1

我通过在页面底部揭幕来设置元素的动画。子元素的位置不应受到揭幕动画大小更改的影响

这就是我想要的：

<div>
    <h1>Hello stranger</h1>
</div>


你好，陌生人

两个元素的位置均为

绝对值

，顶部、右侧、底部和左侧设置为

。通过将

div的top
从100%
降低到0%
来显示内容。祝你好运
我的目标是
将航向始终保持在固定位置（中间）
在标题尚未打开时隐藏标题
但这些是我的问题（包括小提琴）

当使用位置时：对于h1
溢出
固定

使用位置时：绝对位置

使用

clip:rect（500px自动）

时，我失去了使用

的能力。因此，如果不使用JavaScript，我无法确定视口的确切高度

在没有JS的情况下，还能做些什么来归档所描述的行为？

这就是您想要的

你需要这样做。请参见示例中的css

<h1>Hello stranger</h1>
<div class="test"></div>

你好，陌生人

我想您可以将h1从

位置：绝对

更改为

固定

div{
位置：绝对位置；
溢出：隐藏；
最高：100%；
右：0；
底部：0；
左：0；
背景：黑色；
颜色：白色；
动画：无限；
}
h1{
位置：固定；
最高：50%；
左：0；
右：0；
文本对齐：居中；
转化：translateY（-50%）；
保证金：0；
}
@关键帧ani{
0% {
最高：100%；
}
100% {
最高：0%；
}
}


嗨，我被中心化了

我尝试使用伪元素隐藏h1

此伪元素具有任意高的高度，并且始终位于div的上侧

div:after {
    content: "";
    position: absolute;
    height: 9999px;
    width: 100%;
    bottom: 100%;
    background-color: white;
}

解决方案是同时将

h1

向

div

动画的相反方向移动，这会产生

h1

保持静止的错觉。然而，

h1

实际上也相对于

div

朝相反方向移动

我保留了相同的标记和

位置：绝对；排名：0；右：0；左：0；底部：0您在两个元素上声明的要求

HTML
<div>
    <h1>Hello stranger</h1>
</div>

将hide
类应用于div
（通过单击小提琴中的切换键），您将获得所需的效果
这里需要注意的是3dtransforms的使用。这比设置top
或margins
的动画平滑得多，并且利用了使用设备来实现这一点
3dtransforms是可用的，但根据您想要提供的支持，在某些情况下可能需要应用浏览器前缀。
您也可以翻译文本顶部的div:after
：


$$（'button'）.first（）.on（'click'，函数（e）{$$（'body'）.first（）.toggleClassName（'animate'）；}）
正文{
保证金：0
}
div{
位置：绝对位置；
身高：100%；
宽度：100%；
z指数：-1；
溢出：隐藏
}
部门：之后{
内容：“；
位置：绝对位置；
身高：100%；
宽度：100%；
底部：100%；
背景色：黑色；
排名：0；
z指数：999；
}
h1{
位置：绝对位置；
颜色：红色；
最高：50%；
左：0；
右：0；
文本对齐：居中；
转化：translateY（-50%）；
}
.制作动画div:after{
动画名称：ani；
动画持续时间：2秒；
动画填充模式：正向；
}
@关键帧ani{
0% {
变换：translateY（0）；
}
100% {
转换：translateY（-100%）；
}
}
按钮{位置：绝对；顶部：5px；左侧：5px；
z-index:9999}

嗨，我被中心化了
开始
我需要将标题放在div内。仅仅掩盖它对我来说不起作用：/但是你的div高度不能保持100%。你想把标题放在中间，但你的分区只有20%的高度？我不认为你能做到这一点。您需要另一个div来对齐文本或其他内容。请使用clip
。只是没有百分比单位，这使得很难确定高度。所以我想可能还有另一种方法…clip不支持百分比高度，但是你可以用javascript来确定高度。抱歉，回复太晚了；不幸的是，我不能使用position:fixed
，因为它将标题呈现为始终可见（请参阅）。还有其他想法吗？感谢you@RienNeVaPlu͢好的，你能不能像演示一样将其设置为与默认背景相同的颜色？我正在处理的项目，使用标题之外的图像，因此我不能假装它的可见性（不透明度也不行）。为了简单起见，我删去了问题中的代码。回答得很好！特别是关于GPU加速的部分。谢谢
div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    transform: translate3d(0, 0%, 0);
    overflow: hidden;
}

h1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    text-align: center;
    transform: translate3d(0, 50%, 0);
}

/* Transition effect and timing must be the same for both elements to give the perfect illusion */
div,
h1 {
    transition: transform 500ms ease-in;
}

/* The transform class added to the div to begin the animation on the h1 and div at the same time */
.hide {
    transform: translate3d(0, 100%, 0);
}
.hide h1 {
    transform: translate3d(0, -50%, 0);
}