position:fixed 不设置top和left就能相对于父元素定位？

我在看别人的博客的布局的时候，发现了一个有趣的问题，它的侧边栏的定位方式设置的是position:fixed，但是没有设置top和left的值，这个时候它没有相对于视口定位，而是相对于它的父元素定位了，我感到很疑惑，想知道这样的用法对不对？以及为什么position:fixed会这样？
图片描述

博客地址

css html

阅读 11.8k

6 个回答

得票最新

CRIMX

9.1k2720

发布于
2019-02-13

这个位置叫做 static position，就是脱离文档流之前的位置。没有设置定位时会用这个做默认值。

羊羊羊

1.7k1415

发布于
2019-02-13

如果没有设置top left，可以相对父元素使用margin定位，且父元素的padding也是有用的，不同的是，该元素脱离了文档流

<!DOCTYPE html>
<html>
<head>
    <title>哈哈哈哈哈</title>
</head>
<style type="text/css">
    .container {
        width: 300px;
        height: 300px;
        background: blue;
        margin: 50px auto;
    }
    .inner {
        width: 100px;
        height: 100px;
        background: red;
        position: fixed;
        margin: 20px 50px;
    }
    .inner2 {
        width: 150px;
        height: 100px;
        background: yellow;
    }
</style>
<body>

<div class="container">
    <div class="inner">
        1这是什么
    </div>
    <div class="inner2">
        2222sjakxsjka哈哈哈这是什么
    </div>
</div>

</body>
</html>

表现出来是这样的：
图片描述