Question

我在很多地方看过那个位置：固定;应该将元素基于视口，而不是它的父元素，因为它已从正常文档流中删除。但是，正如在下面的代码中可以看到的那样，它确实以这种方式工作。位置固定的元素将其作为父元素的起点。是什么赋予了！？谢谢。

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="cssreset.css">
<head>
<title>TTK</title>
<style>
* {
	box-sizing: border-box; 
}
.container {
	width: 500px;
	height: 500px;
	margin: 25px auto;
	border: 5px solid black;
	position: relative;
	background: yellow;
}
.positionFixed {
	width: 750px;
	height: 250px;
	border: 3px solid blue; /* why does the border not show up */
	position: fixed;
	background: red;
}
</style>
</head>]
<body>
<div class="container">
	<div class="positionFixed"></div>
</div>
</body>
</html>

Answer 1

如果你不知道position:fixed;元素应该在哪里，它就不会知道。添加一些位置（顶部，左侧，右侧和/或底部），它应该位于右侧。

.positionFixed {
    width: 750px;
    height: 250px;
    border: 3px solid blue; /* why does the border not show up */
    position: fixed;
    top:0;
    left:0;
    background: red;
}

Answer 2

位置为绝对的元素;相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。

来源：http://www.w3schools.com/css/css_positioning.asp

位置：固定;不在视口中基本元素

2 个答案: