A div 在体外的绝对位置

Question

我只想在页面末尾看到 div 的一半。我尝试应用 bottom:-100px 或 margin-bottom:-100px 或 padding-bottom:-100px，但没有任何效果。

我能做什么？

这是我的 JSFIDDLE：https://jsfiddle.net/cuxyrfh8/6/

div {
  background: pink;
  position: absolute;
  height: 200px;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  right: 0;
  width: 400px;
  border: 5px black solid;
  bottom:-100px;
}

Answer 1

负填充根本不起作用。使用包装器元素：

HTML

<div class="wrapper">
    <div class="thediv">
    </div>
</div>

CSS

.wrapper {
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.thediv {
    background: pink;
    position: absolute;
    height: 200px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    width: 400px;
    border: 5px black solid;
    top: 0;
}

JSFiddle

Answer 2

div 在视口外刚好 100 像素。我假设你不想要那种滚动行为？你可以达到那个宽度 overflow: hidden;.

编辑 1：如果 body 的高度大于视口，您可以设置 position: relative;，使 div 的位置朝向 body。

编辑 2：如果您想要向下滚动 body 的一半 div，您需要一个包装器元素并对其应用溢出和位置规则。

body {
  margin: 0;
}
.wrapper {
  height: 1000px;
  overflow: hidden;
  position: relative;
}
.wrapper div {
  background: pink;
  position: absolute;
  height: 200px;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  right: 0;
  width: 400px;
  border: 5px black solid;
  bottom:-100px;
}

<div class="wrapper">
  <div></div>
</div>

Answer 3

您可以通过将元素的 position 从 aboslute 更改为 fixed 来实现您想要的效果，如下所示：

div{
    background:pink;
    border:5px black solid;
    bottom:-100px;
    height:200px;
    left:0;
    margin:0 auto;
    position:fixed;
    right:0;
    width:400px;
}

<div></div>

Answer 4

bottom: -100px 会将 div 移动到底部 100px，因此会出现滚动条（完整的 div 将可见）。

为避免这种情况，请在页面的 body 上使用 overflow: hidden。

body {
  overflow: hidden;
}
div {
  background: pink;
  position: absolute;
  width: 400px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  border: 5px black solid;
  bottom: -100px;
}
div:hover {
  bottom: 0px;
}

<div>
</div>

A div 在体外的绝对位置

A div in absolute position outside the body

html

css

position

absolute

HTML

CSS