Question

http://i.stack.imgur.com/AIGfo.jpg

以下是3个嵌套div的示例。 -div0（颜色：绿色;） --div1（颜色：蓝色;） --- div2（颜色：黄色;不透明度：0.4;）;

我的目标是在整个屏幕上将div的宽度设置为黄色（此div中将有图像），但不使用蓝色重叠文本。到目前为止，唯一能够重叠外部div宽度的解决方案是将其定位为绝对值，但它与父div（蓝色）的内容重叠。任何想法如何实现这一点而不重叠父div的内容？

body {
	margin: 0;
	background-color: black;
}

.outer0 {
	background-color: green;
	width: auto;
	height: auto;
	padding: 20px 30px;
}

.outer1 {
	background-color: blue;
	width: auto;
	height: auto;
	position: relative;
}

.inner {
	background-color: yellow;
	height: 50px;
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0.4;
}

<div class="outer0">
	<div class="outer1">
		<p>Some text1</p>
		<div class="inner">Here will be image, that shouldn't clip text of parent div</div>
		<p>some text2</p>
	</div>
	</div>

Answer 1

那样的东西？

html,
body,
.green {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
p {
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 2;
}
.green {
  background-color: green;
  padding: 50px;
}
.blue {
  background-color: blue;
  width: 900px;
  margin: 0 auto;
  padding: 20px;
}
.yellow {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: yellow;
  z-index: 1;
  -moz-transform: translate(0 -50%);
  -ms-transform: translate(0 -50%);
  -webkit-transform: translate(0 -50%);
  transform: translate(0 -50%);
}

<div class="green">
  <div class="blue">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <div class="yellow"></div>
  </div>
</div>

绝对定位内部div重叠父div的内容

1 个答案: