重叠div与div上面

Question

好的，所以我一直试图做这样的事情：

Example

但是，每当我更改＆＃34; 3＆＃34;它也拉起了＃34; 2＆＃34;达到同样的高度。我包裹了＃34; 3＆＃34;内部＆＃34; 2＆＃34;因为我想要底部排队。

＆＃13;

＆＃13;

html,body {
  margin: 0;
  padding: 0;
}

.example {
  background-color: #222;
  padding: 100px;
  text-align: center;
  color: white;
}

.div2 {
  background-color: #e8e8e8;
}

.div3 {
  margin: -50px auto 0px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  width: 80%;
}

h1,p {
  padding: 0px;
  margin: 0px;
}

＆＃13;

<div class="example">
  <h1>
  Div 1
  </h1>
</div>
<div class="div2">
  <div class="div3">
   <h1>
   Div 3
   </h1>
   <p>
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   </p>
  </div>
</div>
<div class="example">
  <h1>
  Div 4
  </h1>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是利润率下降的结果。我只是简单地按照＆＃34;其他方式进行＆＃34;，将元素置于相对位置，并使用负边距底部使外部div底端线再次向上。

＆＃13;

＆＃13;

html,body {
  margin: 0;
  padding: 0;
}

.example {
  background-color: #222;
  padding: 100px;
  text-align: center;
  color: white;
}

.div2 {
  position: relative;
  background-color: #e8e8e8;
  height: 200px;
  text-align: center;
}

.div3 {
  position: absolute;
  margin: -50px auto 0px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

h1,p {
  padding: 0px;
 margin: 0px;
}

＆＃13;

html,body {
  margin: 0;
  padding: 0;
}

.example {
  background-color: #222;
  padding: 100px;
  text-align: center;
  color: white;
}

.div2 {
  background-color: #e8e8e8;
}

.div3 {
  position: relative;
  top: -50px;
  margin: 0 auto -50px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  width: 80%;
}

h1,p {
  padding: 0px;
  margin: 0px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为你想将div3绝对定位到div2（它应该是相对的）。然后，您可以独立播放div3而不必沿途拖动div2。

也许是这样的？

var result = usersquery.Select(x => new 
  {
    x.photos.PhotoURL,
    x.photos.PhotoDescription,
    x.user.State,
    x.user.Country,
    x.physical.EyesColor,
    x.physical.HairColorInfo,
    x.physical.HairTypeInfo,
    x.physical.BodyHeight,
    x.physical.BodyWeight
  }).ToList();

和

<div class="example">
  <h1>
  Div 1
  </h1>
</div>
<div class="div2">
  <h1>
  Hello
  </h1>
  <div class="div3">
   <h1>
   Div 3
   </h1>
   <p>
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   </p>
  </div>
</div>
<div class="example">
  <h1>
  Div 4
  </h1>
</div>

请参阅此处的小提琴：https://jsfiddle.net/rdbjrqL3/

Answer 3

将position:relative放入 .div2 ，将html,body { margin: 0; padding: 0; } .example { background-color: #222; padding: 100px; text-align: center; color: white; } .div2 { background-color: #e8e8e8; position: absolute; } .div3 { margin: -50px auto 0px auto; padding: 20px; background-color: #fff; text-align: center; width: 80%; position:relative; } h1,p { padding: 0px; margin: 0px; }放入 .div3

＆＃13;

＆＃13;

<div class="example">
  <h1>
  Div 1
  </h1>
</div>
<div class="div2">
  <div class="div3">
   <h1>
   Div 3
   </h1>
   <p>
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   </p>
  </div>
</div>
<div class="example">
  <h1>
  Div 4
  </h1>
</div>

＆＃13;

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.stackoverflow.spark</groupId>
  <artifactId>hello</artifactId>
  <version>0.1-SNAPSHOT</version>
  <description>Spark Hello</description>
  <inceptionYear>2017</inceptionYear>

  <dependencies>
    <dependency>
      <groupId>com.sparkjava</groupId>
      <artifactId>spark-core</artifactId>
      <version>2.6.0</version>
    </dependency>
  </dependencies>

</project>

＆＃13;

＆＃13;

＆＃13;