CSS位置：固定

Question

我在修复 html/css 位置属性代码中的问题时遇到困难。我想在右侧和底部有一个固定位置的词 "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>

Answer 1

删除您对 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>

CSS位置：固定

CSS position: fixed

html

css

position

fixed