“顶部"使用百分比时CSS属性无效 [英] "top" CSS property has no effect when using a percentage

问题描述

我在页面上定义了以下CSS:

I have this CSS defined with my page:

.content {
    background-image: url("img/bg.jpg");
    width: 100%;
}

.exhibit {
    width: 100%;
    height: 100%;
    text-align: center;
}

.yt-embed {
    width: 560px;
    height: 315px;
    position: relative;
    top: 50%;
}

带有.yt-embed的DIV位于.exhibit的内部，而带有.exhibit的DIV位于.content的内部.

The DIV with .yt-embed is inside one with .exhibit, and the DIV with .exhibit is inside one with .content.

我的问题是，.yt-embed类中的"top"属性绝对无效.但是，当它设置为像素值而不是百分比时，它会起作用.

My issue is that the "top" property in my .yt-embed class is having absolutely no effect. However, it does work when it is set to a pixel value, instead of a percentage.

推荐答案

我的问题是，.yt-embed类中的"top"属性绝对无效.

My issue is that the "top" property in my .yt-embed class is having absolutely no effect.

您的问题是您的外部元素没有特定的高度.它们由具有高度声明的内部元素 .yt-embed 扩展.

Your problem is that your outter elements don't have a specific height. They are being expaded by the inner element .yt-embed that has the height declaration.

使用基于百分比的值已被广泛使用并且效果很好.这是一个简单的示例:

Using percentage based values is widely used and works fine. Here's a quick example:

* {
  box-sizing: border-box;
}
.wrapper {
  display: inline-block;
  width: 300px;
  height: 300px;
  position: relative;
  background: #f00;
  padding: 10px;
}
.full.sized {
  width: 100%;
  height: 100%;
  background: #0f0;
}
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #00f;
  color: #fff;
  padding: 10px;
}

<div class="wrapper">

  <div class="full sized">

    <div class="inner">inner</div>

  </div>

</div>

这篇关于“顶部"使用百分比时CSS属性无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！