怎么讓position:fixed相對于父元素定位
position:fixed 正常來說是相對于瀏覽器窗口定位的, 最近遇到一個場景,需要讓加了這個屬性的元素相對于父元素定位
fixed不為元素預(yù)留空間,而是通過指定元素相對于屏幕視口(viewport)的位置來指定元素位置亡嫌。元素的位置在屏幕滾動時不會改變掘而。打印時挟冠,元素會出現(xiàn)在的每頁的固定位置袍睡。fixed 屬性會創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform 屬性非 none 時控淡,容器由視口改為該祖先。
解決方案: 給父元素加上 transform: scale(1,1) 或者是別的,只要transform 的屬性不是none就行
(會產(chǎn)生副作用, 會影響其他的定位)
讓加了postion:fixed 屬性的元素水平居中
解決方案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<style>
.test {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 600px;
margin: 0 auto;
background-color: green;
}
</style>
</head>
<body>
<div class="test">22</div>
</body>
</html>