Question

我一直在享受并成功使用CSS模拟网页。但后来我决定玩一个固定菜单＆＃34;而我的理解现在还不是那么清楚。

因此，我的简短知识会创建一个空白的HTML文档，然后创建一个＆＃34;容器＆＃34; div并将所有其他元素放在＆＃34; parent＆＃34;容器。没问题，所有这些都适用于浮动元素等。

但是当放置＆＃34;固定＆＃34;在我父母div中的元素我迷失了为什么固定元素观察父母的左边距而忽略了它的右边距。

＆＃13;

html, body{margin: 0; padding: 0;}

#container
{
margin:0px auto;
width:90%;
height:500px;
background:#A8A8A8;
}

.fixed-menu
{
position: fixed;
height: 50px;
width:100%;
background-color: #00a087;
}

＆＃13;

<body>
<div id="container">

<div class="fixed-menu"></div>

</div>
</body>

＆＃13;

所以用上面的＆＃34;固定＆＃34;块确实与父容器的左边距对齐，但完全运行到浏览器页面的右边缘。我已经发现我可以将固定块率提高90％并解决问题，但我不明白为什么。为什么该块不是父母＆＃34;容器的90％＆＃34;块。

我期待你的知识。感谢

Answer 1

更新您的css，如下所示，以达到您想要的效果。从父级继承宽度而不是使用100％。

.fixed-menu
{
  position: fixed;
  height: 50px;
  width:inherit;
  left:auto;
  right:auto;
  background-color: #00a087;
}

DEMO

Answer 2

如@ freestock.tk所述，固定元素是＆＃34;固定＆＃34;到屏幕视口。相对于屏幕视口计算宽度（和以％为单位的高度）。

看起来它与父容器的左边距对齐，因为你没有用左或右css属性定位它，它不受父容器约束，它只是在同一个在这种特殊情况下的横向位置。

如果你设置

左：0;

它将对齐视口的左边距并忽略父容器，这可以帮助您更好地理解他的固定位置。

＆＃13;

html, body{margin: 0; padding: 0;}

#container
{
margin:0px auto;
width:90%;
height:500px;
background:#A8A8A8;
}

.fixed-menu
{
position: fixed;
left:0;
height: 50px;
width:100%;
background-color: #00a087;
}

＆＃13;

<body>
<div id="container">

<div class="fixed-menu"></div>

</div>
</body>

＆＃13;

Answer 3

你几乎就在那里，只需添加module ModuleX config src ModuleX //may be you forget this one Controller Factory Model ... view Module.php几个css规则：

class Module implements AutoloaderProviderInterface, ConfigProviderInterface{
public function getAutoloaderConfig(){
    return array(
        'Zend\Loader\StandardAutoloader' => array(
            'namespaces' => array(
                __NAMESPACE__ => __DIR__ . '/src/' . __NAMESPACE__,
            ),
        ),
    );
}

public function getConfig(){
    return include __DIR__ . '/config/module.config.php';
}

了解父子关系（固定块）CSS

3 个答案: