Question

我想将id="des"放在包含div的底部。我认为使用position:absolute会起作用，但它会漂浮在容器之外。

＆＃13;

#links {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  box-shadow: 1px 1px 1 black;
  overflow: auto;
}
img {
  height: 100%;
  width: 100%;
}
#des {
  border: 1px solid;
  position: absolute;
  bottom: 0;
}

＆＃13;

<div id="links">
  <a href="/">
    <img src="http://icons.iconarchive.com/icons/fasticon/social-bookmark/256/Feeds-icon.png" />
    <div id="des">FEEDS
      <br/>get latest updates here</div>
  </a>
</div>

＆＃13;

Answer 1

只需将position:relative添加到#links

即可

详情了解排名here

#links {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  box-shadow: 1px 1px 1 black;
  overflow: auto;
  position: relative;
}
img {
  height: 100%;
  width: 100%;
}
#des {
  border: 1px solid;
  position: absolute;
  bottom: 0;
}

<div id="links">
  <a href="/">
    <img src="http://icons.iconarchive.com/icons/fasticon/social-bookmark/256/Feeds-icon.png" />
    <div id="des">FEEDS
      <br/>get latest updates here</div>
  </a>
</div>

Answer 2

绝对定位的元素相对于最近的祖先定位，在您的情况下是身体。然而，在position:relative设置#links会为您提供您之后的行为：

＆＃13;

#links {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  box-shadow: 1px 1px 1 black;
  overflow: auto;
  position:relative;
}
img {
  height: 100%;
  width: 100%;
}
#des {
  border: 1px solid;
  position: absolute;
  bottom: 0;
}

＆＃13;

<div id="links">
  <a href="/">
    <img src="http://icons.iconarchive.com/icons/fasticon/social-bookmark/256/Feeds-icon.png" />
    <div id="des">FEEDS
      <br/>get latest updates here</div>
  </a>
</div>

＆＃13;

有关位置属性的详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/position。

Answer 3

            let width = CGFloat(0)

            CATransaction.begin()
            CATransaction.setAnimationDuration(2.0)
            self.menulayer.bounds = CGRectMake(0, 0, width , 50)
            CATransaction.commit()

DEMO

Answer 4

两者都添加位置：相对于.des，但如果您不希望它溢出，请在#links上设置Main.storyboard，请参阅codepen

将div浮动到包含div的底部

4 个答案: