CSS
* {
moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #25274D;
font-family: "Trebuchet MS";
}
#header {
background-color:;
position:fixed;
top:0;
left:0;
width:100%;
}
#link {
text-decoration: none;
color:whitesmoke;
float:left;
font-size: 20px;
font-weight:700;
padding-right:1vw;
padding-left: 1vw;
display: block;
transition: 0.4s;
height:100%;
}
#link:hover {
background-color: #464866;
color:#2E9CCA;
}
a:link, a:visited {
line-height:7vh;
}
#top__nav {
text-decoration: none;
height:7vh;
}
#top__nav__menu {
position:relative;
display:block;
list-style-type: none;
padding-left: 60vw;
height:7vh;
background-color: #25274D;
margin-top:0;
}
#logo {
float:left;
position: absolute;
left: 1vw;
}
#revealCard {
position: relative;
background-color: #25274D;
width: 50%;
height: 100vh;
z-index: 1;
float: left;
border:1px solid #464866;
perspective: 1000;
}
#card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.4s linear;
}
#revealCard:hover #card {
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
color:#2E9CCA;
text-align: center;
font-size: 30px;
}
.face.back {
display: block;
transform: rotateY(180deg);
color: #2E9CCA;
text-align: center;
box-sizing: border-box;
padding: 20px auto;
}
#img {
width:100%;
height: 100%;
}
#dynamicText {
max-width: 100%;
height: 30vh;
font-size: 40px;
position:absolute;
margin-top:20px;
}
我有一个顶部导航栏，然后有两个div，它们旋转并像卡片的两个面一样显示内容。在它下面，我需要实现一些其他功能，但是文本位于内容的顶部而不是其下方。
<div id="header">
<div id="top__nav">
<div id="card">
<ul id="top__nav__menu">
<img id="logo" src="Logo.png">
<li><a id="link" href="#">Home</a></li>
<li><a id="link" href="#">Free Trial</a></li>
<li><a id="link" href="#">Samples</a></li>
<li><a id="link" href="#">Q-Bank</a></li>
<li><a id="link" href="#">Help</a></li>
</ul>
</div>
</div>
<div id="revealCard">
<div id="card">
<div class="face">
<p>Hey, hover to see the image.</p>
</div>
<div class="back face center">
<img id="img" src="https://images.unsplash.com/photo-1419064642531-e575728395f2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=67fd942ed774f3de1db50cf3dd0065eb&w=1000&q=80">
</div>
</div>
</div>
<div id="revealCard">
<div id="card">
<div class="face">
<p>Hey, hover to see the image.</p>
</div>
<div class="back face center">
<img id="img" src="http://country.southafrica.net/country/cache/ce_img_cache/local/country/uploads/images/Garden-Route_640_480_90_s_c1_c_t.jpg">
</div>
</div>
</div>
</div>
<div id="dynamicText">
<p>Signup For Your Free Beta Trial Today!</p>
</div>
div dynamicText中的文本显示在内容的顶部，而不是下方。我希望它作为带有滚动的普通滚动页面。我认为头寸属性存在一些问题。请看看并告诉我解决方法是什么？
答案 0 :(得分：0)
这里是经过编辑的代码：
HTML
<div id="header">
<div id="top__nav">
<img id="logo" src="Logo.png">
<ul id="top__nav__menu">
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">Free Trial</a></li>
<li><a class="link" href="#">Samples</a></li>
<li><a class="link" href="#">Q-Bank</a></li>
<li><a class="link" href="#">Help</a></li>
</ul>
</div>
</div>
<div class="revealCard">
<div class="card">
<div class="face">
<p>Hey, hover to see the image.</p>
</div>
<div class="back face center">
<img class="img" src="https://images.unsplash.com/photo-1419064642531-e575728395f2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=67fd942ed774f3de1db50cf3dd0065eb&w=1000&q=80">
</div>
</div>
</div>
<div class="revealCard">
<div class="card">
<div class="face">
<p>Hey, hover to see the image.</p>
</div>
<div class="back face center">
<img class="img" src="http://country.southafrica.net/country/cache/ce_img_cache/local/country/uploads/images/Garden-Route_640_480_90_s_c1_c_t.jpg">
</div>
</div>
</div>
<div id="dynamicText">
<p>Signup For Your Free Beta Trial Today!</p>
</div>
CSS：
* {
moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #25274D;
font-family: "Trebuchet MS";
}
.link {
text-decoration: none;
color:whitesmoke;
float:left;
font-size: 20px;
font-weight:700;
padding-right:1vw;
padding-left: 1vw;
display: block;
transition: 0.4s;
height:100%;
}
.link:hover {
background-color: #464866;
color:#2E9CCA;
}
a:link, a:visited {
line-height:7vh;
}
#top__nav {
text-decoration: none;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
background-color: #25274D;
}
#top__nav__menu {
display: flex;
justify-content: flex-end;
list-style-type: none;
background-color: #25274D;
padding-right: 20px;
}
#logo {
float:left;
position: absolute;
left: 1vw;
}
.revealCard {
position: relative;
background-color: #25274D;
width: 50%;
height: 300px;
float: left;
border:1px solid #464866;
perspective: 1000;
}
.card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.4s linear;
}
.revealCard:hover .card {
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
color:#2E9CCA;
text-align: center;
font-size: 30px;
}
.face.back {
display: block;
transform: rotateY(180deg);
color: #2E9CCA;
text-align: center;
box-sizing: border-box;
padding: 20px auto;
}
.img {
width:100%;
height: 100%;
}
#dynamicText {
max-width: 100%;
font-size: 40px;
color: white;
}
也可以在this codepen上查看它
.revealCard（最初您使用的是100vh，这意味着100％的视口高度-引起麻烦的原因之一）#top__nav 答案 1 :(得分：0)
从dynamicText中删除position: absolute，然后在manifestCard中执行float:right，而不是float: left。
此外，您不应多次使用相同的ID。如果您要使用相同的名称，请将其更改为类。
希望这会有所帮助！