Question

我是初学者，我有一点问题，我无法修复过去三个小时。所以我认为这是安全的。

我已成功将固定菜单和视频标题放入我的页面。

但是当我想在视频标题之后放置文本时，我在调整大小时遇到了该文本的问题。这是图片，请看蓝色文字;

http://i.imgur.com/FfdSp9I.jpg

当我全屏观看页面时，它是完美的。

但是我调整的越多，蓝色文字就越多，看起来就很难看。

在这里你可以看到我的css和html代码;

body {
  background: #F0F0F0;
  margin: 0px;
}

.header {
  height: 10%;
  background: #fff;
  position: fixed;
  margin: 0px auto;
  top: 0;
  width: 100%;
  overflow: hidden;
  opacity: 0.8;
}

.basicf {
  position: absolute;
  top: 80%;
  color: blue;
}

.basic {
  color: red;
  position:absolute;
  top: 100%;
}

#video-container {
    position: absolute;
    top:10%;
    left:0%;
    height: 70%; 
    width:100%;
    overflow: hidden;
    z-index:-1;
}

video.fillWidth {
    width: 100%;
}

HTML：

<div class="header">menu here.</div>

<div id="video-container">
    <video autoplay loop class="fillWidth">
        <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"/>
        <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"/>
        Your browser does not support the video tag. I suggest you upgrade your browser.
    </video>
</div><!-- end video-container -->

<div class="basicf">please start just after video header.</div>

<div class="basic">Where is this text?</div>

在div元素basicf中，我尝试了top: 80%;或padding: 80% 0 0 0 0只有在全屏时才有用。我也试了一些position: absolute, relative etc.，但我无法修复。

Answer 1

body {
  background: #F0F0F0;
  margin: 0px;
}

.header {
  height: 10%;
  background: #fff;
  position: fixed;
  margin: 0px auto;
  top: 0;
  width: 100%;
  overflow: hidden;
  opacity: 0.8;
}

.basicf {
  color: blue;
}

.basic {
  color: red;
}

#video-container {
    margin-top:10%;
    height: 70%; 
    width:100%;
    overflow: hidden;
    z-index:-1;
}

video.fillWidth {
    width: 100%;
}

<div class="header">menu here.</div>

<div id="video-container">
    <video autoplay loop class="fillWidth">
        <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"/>
        <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"/>
        Your browser does not support the video tag. I suggest you upgrade your browser.
    </video>
</div><!-- end video-container -->

<div class="basicf">please start just after video header.</div>

<div class="basic">Where is this text?</div>

Answer 2

在你的情况下不要使用position：absolute。

试试这个：

.basicf {
position: relative;
color: blue;
vertical-align: top;
}

#video-container {
position: relative;
top:10%;
left:0%;
height: 70%; 
width:100%;
overflow: hidden;
z-index:-1;
}

你的基本没有显示的原因是你用绝对做的所有事情，如果它们重叠，你的元素会互相隐藏。

Answer 3

您的网页正在崩溃，因为您使用了position错误。除非你确切知道自己在做什么，否则不要把所有的东西放在绝对和固定的位置。

当您在任何地方都不使用position时，HTML将在您从上到下编写时进行渲染。通过定位东西，您可以杀死该订单，并在您定位时将其定位。因此，由于文本得到top:80%，它总是会得到80％。换句话说：它会卡在页面上，如果你只是水平调整大小，它就不会移动。

这是您编辑过的CSS：

body {
    background: #F0F0F0;
    margin: 0px;
}
.header {
    height: 50px;
    background: #fff;
    margin: 0px auto;
    width: 100%;
    overflow: hidden;
    opacity: 0.8;
}
.basicf {
    color: blue;
}
.basic {
    color: red;
}
#video-container {
    margin-top: 0px;
    height: 70%;
    width:100%;
    overflow: hidden;
}
video.fillWidth {
    width: 100%;
}

working Fiddle 。

Answer 4

您可以尝试删除absolute定位，并使用relative并在文字上清楚地将其保留在下方，例如this。

.basicf {
position: relative;
color: blue;
    clear:both;
}

#video-container {
    position: relative;
    margin-top:10%;
    left:0%;
    height: 70%; 
    width:100%;
    overflow: hidden;
    z-index:-1;
}

当我调整大小时，div元素移动。有关定位的问题

4 个答案: