CSS位置:固定

问题描述 投票:0回答:1

我在修复我的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 position fixed
1个回答
2
投票

删除你对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>
© www.soinside.com 2019 - 2024. All rights reserved.