我有一个内容丰富的页面，window是可滚动的，其中有可滚动的div我的目标是在div的最底部放置一个图标，当某人滚动div时将显示，并且在内容消失或window滚动后将无法显示。
但我没有得到如何实现我的目标。制作fixed时，整个body滚动都可以看到它。
我希望将该元素固定在div的底部，如果body滚动则不会显示
下面我举一个例子：
div { height: 100px;
border: 1px solid;
overflow:auto;
position:relative;
}
span {
background : red;
position : fixed;
}<div>
<p>I have something</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<span>this need to fixed at the botti=om and visible while scrolling the div</span>
</div>
<p>I have something</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
正如您所看到的那样，如果position fixed div，红色条带内容对整个身体都是可见的。但是，我只想将它固定在div的底部，只有在class CustomCell : UITableViewCell {
static let identifier = "CustomCell"
// properties, etc., e.g.:
private let label = UILabel()
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
// here you do the setup, adding subviews, etc., e.g.:
self.contentView.addSubview(label)
NSLayoutConstraint.activate([
label.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 4),
label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -4),
label.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 8),
label.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -8),
])
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
//other methods, e.g., for configuring the cell, e.g.:
func configure(withTitle title: String) {
label.text = title
}
}
滚动时才可见。
答案 0 :(得分：5)
标准支持的方法是编辑HTML标记并向可滚动和“固定”元素添加包装元素 - 现在将改为position: absolute;：< / p>
#wrapper { /* ADDED */
position: relative;
width: 200px;
}
#scrollable {
height: 100px;
border: 1px solid;
overflow: auto;
position: relative;
}
#wrapperFooter {
background: red;
position: absolute; /**/
bottom:0;
}<div id="wrapper">
<div id="scrollable">
<p style="border: 4px dashed #000; height: 200px;"></p>
</div>
<div id="wrapperFooter">ABSOLUTELY! :)</div>
</div>
答案 1 :(得分：1)
我认为您正在寻找sticky这样的职位
div {
height: 100px;
border: 1px solid;
overflow: auto;
position: relative;
}
span {
background: red;
position: sticky;
bottom: 0;
}<div>
<p>I have something</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<span>this need to fixed at the bottom and visible while scrolling the div</span>
</div>
<p>I have something</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
只需关注browser support，因为此地方尚未支持
这是使用固定位置的另一个技巧，但更多的是黑客而非通用解决方案。
body {
transform:translate(0,0); /* Block fixed position from scrolling*/
}
div {
height: 100px;
border: 1px solid;
overflow: auto;
position: relative;
}
span {
background: red;
position: fixed;
margin-top:-110px; /*this need to be calculated depending on content*/
}<div>
<p>I have something</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<span>this need to fixed at the bottom and visible while scrolling the div</span>
</div>
<p>I have something</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>