位置粘滞在IE或Safari中无效

Question

我正在用CSS创建一张卡片。它在Chrome中运行得非常好，但在IE / Safari浏览器中不起作用。

#nb {
    position: sticky;
    width: 280px;
    height: 450px;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}
#nb:hover:after {
    background: #f79031!important;
}
#nb::after {
    content: '';
    position: absolute;
    width: 940%;
    height: 100%;
    top: 170px;
    right: -502%;
    background: #ffffff;
    transform-origin: 54% 0;
    transform: rotate(129deg);
    z-index: -1;
}

#nb h5{text-align: left;
line-height: 25px;
padding-left: 7%;}

<div id="nb">
	<a href="http://www.wissentechnology.com/banking-financial/"><img
		class="bimg"
		src="https://wissen-kenvent.rhcloud.com/wp-content/uploads/2017/05/Banking-Financial.jpg"
		style="width: 100%;" />
		<h5 style="font-size: x-large; color: #000000; padding-top: 15px;">Banking
			& Finance</h5>
		<h4
			style="color: #000000; padding-top: 15px; text-align: justify; padding-left: 7%; padding-right: 7%;">We
			bring the right mix of domain and technical expertise to help you
			take emerging imperatives head on and translate them to competitive
			advantage.</h4> </a>
</div>

创建了JSFiddle

Answer 1

Webkit是Apple的Safari浏览器中使用的HTML / CSS呈现引擎。

使用-webkit-sticky代替sticky进行Safari。

#nb {
     position: -webkit-sticky;
}

Answer 2

将#nb的位置更改为相对修正问题。

#nb {
    position: relative;
    width: 280px;
    height: 450px;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}