CSS 位置：固定答案

【问题标题】：CSS position: fixedCSS 位置：固定
【发布时间】：2016-12-14 01:56:17
【问题描述】：

我在解决我的 html/css 代码中的位置属性问题时遇到了困难。我想在右侧和底部有一个固定位置的“社交”字样，这样我就可以在同一个位置滚动它。不管它是什么位置，我什至不能把它放在右边和底部。请告诉我问题出在哪里，以便我解决。

 <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】：

删除您的 html 样式的 cmets。它会起作用的。

我不确定。

但是在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>

【讨论】：

正确。 CSS 的语法格式错误，因此无法识别 position: fixed 属性。
@thesbros 我不记得如何评论 CSS。但我认为他的问题是对风格的评论。
谢谢，当我做 .banner .test {font-size: 3em; font-variant: small-caps;} 但是所有其他的东西都没有。这应该是一个线索，但很奇怪，因为这两个有效。我正在 Linux 上的 Geany 中编写我的代码，它不会将 /* */ 区分为 cmets，但它确实适用于所以它没有为我点击。谢谢！
@BrandonWilliams 欢迎朋友。再见。