[英]How to position an element at a fixed position relatively within a scroll container?
[英]How to position element as fixed in relatively positioned container?
我想固定.side-menu元素的位置,但是下面的代码没有成功。 .side-menu元素随.child-container内容一起移动。
为什么它不起作用以及如何使其起作用? :)
HTML:
<div class="pageWrapper">
<div class="container">
<div class="side-menu">
Menu content
</div>
<div class="child-container">
Large Content
</div>
</div>
</div>
CSS:
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.pageWrapper {
overflow-x: hidden;
min-width: 1200px;
height: 100%;
}
.container {
position: relative;
width: 1170px;
margin: 0 auto;
height: 100%;
}
.side-menu {
position: fixed;
width: 80px;
height: 300px;
}
.child-container {
position: relative;
margin: 40px auto 0 auto;
width: 900px;
}
我已经用问题的html更新了代码:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
*
{
margin: 0;
}
.container
{
position: static;
padding: 0px;
width: 1200px;
margin: 0 auto 0 auto;
}
.side-menu
{
position: fixed;
background: red;
width: 200px;
}
.child-container
{
background: orange;
float: left;
width: 1000px;
margin-left: 200px;
}
</style>
<body>
<div class="pageWrapper">
<div class="container">
<div class="side-menu">
Menu content
</div>
<div class="child-container">
Large Content
</div>
</div>
</div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.