Question

这是我的问题，我有2个div，并希望最下面的一个覆盖上一个div，而不会剪切其空间，但要透明。此代码仅用于显示我的问题。这样的页边距不是我要解决的方式。

.main{
  padding-left:30%;
}

p{
  color:red;
}

.divImg{
  margin-top:-20%;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="main"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
  <div class="divImg"><img src=https://www.google.com/logos/doodles/2013/maria_mitchells_195th_birthday-2005006.2-hp.jpg></div>
</body>
</html>

我不知道这是否可以接受，但是如果我警告我将删除它，因为我无法将您的解决方案应用于我的问题。

这是网站-http://www.plaforma.me/workshop-2/ 我需要将这2艘船从左到右分别放置在上部浅蓝色背景div的末端附近，以使整个div对左右这2张图像透明。

编辑2-解决方案-知道了，这是z-index问题。

z-index属性指定元素的堆叠顺序。具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。注意：z-index仅适用于定位的元素（position：absolute，position：relative或position：fixed）。

Answer 1

您正在寻找CSS z-index。

容器必须是相对的。

.main{
  padding-left:30%;
  position:relative;
}

p{
  color:red;
  z-index:2;
}

.divImg{
  margin-top:-20%;
  z-index:1;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="main"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
  <div class="divImg"><img src=https://www.google.com/logos/doodles/2013/maria_mitchells_195th_birthday-2005006.2-hp.jpg></div>
</body>
</html>

Answer 2

我认为您要在图像左侧添加图片，但不要重叠？如果是这样，则将包含图像的第二个div放在包含HTML文件中文本的div之前。我在图像上使用了一个简单的浮动，然后在相对位置上向下移动了文本并将其对齐。希望这就是您想要的。

p{
  position: relative;
  top: 60px;
  color:red;

}

.divImg{
float: left;
}

Answer 3

您的意思是这样的吗？

如果是这样，您的问题是main文本的位置不是绝对的，因此图像的div影响了其位置。

.main{
  position: absolute;
  top: 0;
}

p{
  color:red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="divImg"><img src=https://www.google.com/logos/doodles/2013/maria_mitchells_195th_birthday-2005006.2-hp.jpg></div>
  <div class="main"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
</body>
</html>

使一个div从左侧覆盖另一个

3 个答案: