I've read in a number of places that position: fixed; should base the element in the viewport, not it's parent element, because it has been removed from normal document flow. However, as can be seen in the following code it does seem to work this way. The element with position fixed takes it's starting point in the parent element . What gives!? Thanks.
<!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>
positionFixed
将固定在左上角。由于positionFixed
的宽度更大,它会覆盖容器。 - DomeTune