[英]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.