如何让图像与下面的下一个div重叠？

Question

你如何让图像重叠到下面的下一个div？

如果你没有得到我的描述，这就是我想要的功能。 click here

这是我到目前为止所拥有的

HTML：

<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible. <img src="https://vetstreet.brightspotcdn.com/dims4/default/8fe930e/2147483647/crop/0x0%2B0%2B0/resize/645x380/quality/90/?url=https%3A%2F%2Fvetstreet-brightspot.s3.amazonaws.com%2F57%2Ff65100a80811e0a0d50050568d634f%2Ffile%2FStaffordshire-Bull-Terrier-3-645mk062811.jpg" alt="Image result for dogs staffordshire terrier"/></div>

CSS：

div.hidden {
    background-color: #00FF00;
    width: 100%;
    height: 100px;
    overflow: hidden;
}

Answer 1

这个布局有些像你的截图，但你需要更好地理解 CSS 定位属性。请结账........

＆＃13;

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  overflow: hidden;
}

.ghost {
  position: absolute;
  left: -100%;
}

.framed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15rem;
  margin-left: -7.5rem;
}

.logo {
  margin-top: -9em;
  cursor: default;
}

.form {
  margin-top: -4.5em;
  transition: 1s ease-in-out;
}

.input {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1.125rem;
  line-height: 3rem;
  width: 100%;
  height: 3rem;
  color: #444;
  background-color: rgba(255, 255, 255, .9);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  padding: 0 1rem;
  font-family: 'Open Sans', sans-serif;
}

.input:focus {
  outline: none;
}

.input--top {
  border-radius: 0.5rem 0.5rem 0 0;
  border-top: 0;
}

.input--submit {
  background-color: rgba(92, 168, 214, 0.9);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  border-top: 0;
  border-radius: 0 0 0.5rem 0.5rem;
  margin-bottom: 1rem;
}

.text {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
  text-decoration: none;
}

.text--small {
  opacity: 0.85;
  font-size: 0.75rem;
  cursor: pointer;
}

.text--small:hover {
  opacity: 1;
}

.text--omega {
  width: 200%;
  margin: 0 0 1rem -50%;
  font-size: 1.5rem;
  line-height: 1.125;
  font-weight: normal;
}

.text--centered {
  display: block;
  text-align: center;
}

.text--border-right {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  margin-right: 0.75rem;
  padding-right: 0.75rem;
}

.legal {
  position: absolute;
  bottom: 1.125rem;
  left: 1.125rem;
}

.photo-cred {
  position: absolute;
  right: 1.125rem;
  bottom: 1.125rem;
}

.fullscreen-bg {
  position: absolute;
  height: 50vh;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(https://unsplash.it/1800/700?random.jpg) center;
  background-size: cover;
}

#toggle--login:checked~.form--signup {
  left: 200%;
  visibility: hidden;
}

#toggle--signup:checked~.form--login {
  left: -100%;
  visibility: hidden;
}

@media (height:300px) {
  .legal,
  .photo-cred {
    display: none
  }
}

＆＃13;

<input type="radio" checked id="toggle--login" name="toggle" class="ghost" />
<input type="radio" id="toggle--signup" name="toggle" class="ghost" />



<form class="form form--login framed">
  <input type="email" placeholder="Email" class="input input--top" />
  <input type="password" placeholder="Password" class="input" />
  <input type="submit" value="Log in" class="input input--submit" />

  <label for="toggle--signup" class="text text--small text--centered">New? <b>Sign up</b></label>
</form>

<form class="form form--signup framed">
  <h2 class="text text--centered text--omega">Join the other <b>152.6 million</b> blogs and</br>share all that you love.</h2>

  <input type="email" placeholder="Email" class="input input--top" />
  <input type="password" placeholder="Password" class="input" />
  <input type="text" placeholder="Username" class="input" />
  <input type="submit" value="Sign up" class="input input--submit" />

  <label for="toggle--login" class="text text--small text--centered">Not new? <b>Log in</b></label>
</form>
</div>

<div class="fullscreen-bg"></div>

＆＃13;

＆＃13;

＆＃13;