Question

我有一个容器，里面有两件事：

应该在后面显示的背景和
背景之上的元素列表

我得到了“幕后”部分工作witz z-index和相对定位。但现在我的容器div根据其内容没有调整其高度。我希望它与其中的元素列表一样高。如何在不设置像素的绝对高度的情况下执行此操作？

.container {
  width: 100px;
  height: 80px;  /* I want container to bis a high as its content */
  position: relative;
  border: 1px solid red;
}

.front,
.back {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
}

.back {
  z-index: 1;
}

.front {
  z-index: 2;
}

.inner {
  border: 1px solid green;
  margin-bottom: 4px
}

<div class="container">
  <div class="back">Background</div>
  <div class="front">
    <div class="inner">One</div>
    <div class="inner">Two</div>
    <div class="inner">Three</div>
    <div class="inner">Four</div>
    <div class="inner">Five</div>
    <div class="inner">Six</div>
  </div>
</div>

Answer 1

尝试以下css：移除.container和.front .back的高度并在.front .back中将position更改为relative

＆＃13;

.container {   
  width: 100px;
  position: relative;
  border: 1px solid red;
}

.front,
.back {  
  width: 100%;             
  position: relative;  
  top: 0;
  left: 0;
}

.back {
  z-index: 1;
}

.front {
  z-index: 2;
}

.inner {
  border: 1px solid green;
  margin-bottom: 4px
}

＆＃13;

<div class="container">
  <div class="back">Background</div>
  <div class="front">
    <div class="inner">One</div>
    <div class="inner">Two</div>
    <div class="inner">Three</div>
    <div class="inner">Four</div>
    <div class="inner">Five</div>
    <div class="inner">Six</div>
  </div>
</div>

＆＃13;

Answer 2

只需将位置更改为.front的相对位置并移除高度 .back

上的高度为100％

＆＃13;

.container {
  width: 100px;
  /*height: 80px;*/  /* I want container to bis a high as its content */
  position: relative;
  border: 1px solid red;
}

.front,
.back {
  width: 100%;
  /*height: 80px;*/
  position: absolute;
  top: 0;
  left: 0;
}

.back {
  z-index: 1;
  height: 100%;
}

.front {
  z-index: 2;
  position: relative;
}

.inner {
  border: 1px solid green;
  margin-bottom: 4px
}

＆＃13;

<div class="container">
  <div class="back"></div>
  <div class="front">
    <div class="inner">One</div>
    <div class="inner">Two</div>
    <div class="inner">Three</div>
    <div class="inner">Four</div>
    <div class="inner">Five</div>
    <div class="inner">Six</div>
  </div>
</div>

＆＃13;

Answer 3

您需要做的只是从height和.container移除.back并使用bottom: 0移除.back

另外，position: absolute你不需要.front所以我删除了它。因为所有内容都在.front内，所以它应该是静态的或相对的。这样内容适当的高度。

这是更新的代码段。

＆＃13;

.container {
  width: 100px;
  //height: 80px;  /* I want container to bis a high as its content */
  position: relative;
  border: 1px solid red;
}

.back {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}

.back {
  z-index: -1;
}

.inner {
  border: 1px solid green;
  margin-bottom: 4px
}

＆＃13;

<div class="container">
  <div class="back">Background</div>
  <div class="front">
    <div class="inner">One</div>
    <div class="inner">Two</div>
    <div class="inner">Three</div>
    <div class="inner">Four</div>
    <div class="inner">Five</div>
    <div class="inner">Six</div>
  </div>
</div>

＆＃13;

Answer 4

我认为这是最简单的代码：

删除课程前面和后面返回，改为只有一个类.content和.content :: after。把你的背景放在内容::之后

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
	.container {
	  width: 100px;
	  height: 100%;
	  position: relative;
	  border: 1px solid red;
	}

	.content {
	  width: 100%;
	  top: 0;
	  left: 0;
	  z-index: 0;
	}

	.content::after {
	  background: blue;
	  content: "";
	  opacity: 0.9;
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  right: 0;
	  left: 0;
	  z-index: -1;   
	}

	.inner {
	  border: 1px solid green;
	  margin-bottom: 4px
	}
	</style>
</head>
<body>
<div class="container">
  <div class="content">
    <div class="inner">One</div>
    <div class="inner">Two</div>
    <div class="inner" style="background: red">Three</div>
    <div class="inner">Four</div>
    <div class="inner">Five</div>
    <div class="inner">Six</div>
  </div>
</div>
</body>
</html>

＆＃13;

使div与其内容一样高（位置：相对）

4 个答案: