我在修复我的html / css代码中的position属性问题时遇到了困难。我希望在右侧和底部有一个单词“Social”,并且有一个固定的位置,所以我可以在同一个位置滚动它。无论它的位置如何,我都无法将它向右和向下。请告诉我我的问题可能来自哪里,以便我可以解决它。
<head>
<meta charset="utf-8" />
<title>Template_</title>
<!--><meta name="generator" content="Geany 1.27" /></-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.container{
position:relative;
width= 100%;
height= 100%;
overflow=scroll;
}
.banner{
<!--></-->
position:absolute;
margin:5px;
width:90%;
right: 0px;
}
.banner .test{
<!--></-->
font-weight: 900;
font-size: 3em;
margin:10px;
font-variant: small-caps;
}
.banner .logo{
<!-->controls images within banner</-->
position: ;
}
.social_bar{
width: 300px;
border: 3px solid #73AD21;
}
#social_strip{
<!-->post button on either left or right to remain fixed
through scrolling
position:fixed;
right:0;</-->
position: fixed;
bottom: 0px;
right: 0px;
}
.content_container{
<!-->contain all content within container, relative to
overall container</-->
position: relative;
margin:5px;
padding:5px;
}
</style>
</head>
<div class="social_bar" id="social_strip">social</div>
<body class="container">
<div class="banner">
<p>Banner</p>
<div class="test">
<p>Test</p>
</div>
</div>
<div class="content_container">
<p>Content</p>
</div>
</body>
删除你对html风格的评论。它会工作。
我不确定这一点。
但是在css中,你需要/* */
来评论。
(延续)
/* This is a comment */
<head>
<meta charset="utf-8" />
<title>Template_</title>
<!--><meta name="generator" content="Geany 1.27" /></-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.container{
position:relative;
width= 100%;
height= 100%;
overflow=scroll;
}
.banner{
position:absolute;
margin:5px;
width:90%;
right: 0px;
}
.banner .test{
font-weight: 900;
font-size: 3em;
margin:10px;
font-variant: small-caps;
}
.banner .logo{
position: ;
}
#social_strip{
position: fixed;
bottom: 0px;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
}
.content_container{
position: relative;
margin:5px;
padding:5px;
}
</style>
</head>
<div class="social_bar" id="social_strip">social</div>
<body class="container">
<div class="banner">
<p>Banner</p>
<div class="test">
<p>Test</p>
</div>
</div>
<div class="content_container">
<p>Content</p>
</div>
</body>