浮动属性不工作在我的css

这是我的html代码，当我设置#login id浮动它只是重叠＃关于博客ID。浮动属性不工作在我的css

#login{ 
      background-color: #00FFFF; 
      float: right; 
      width: 70%; 
      height: 40%; 
      position: absolute; 
      z-index: 2; 
     } 

    #about-blog{ 
      background-color: #A4DDED; 
      width: 30%; 
      height: 50%; 
      position: absolute; 
      z-index: 1; 
     }

以下是完整的代码{下面的代码，我已经提供了更多的信息}

<<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
\t <title>Kvians-Home</title> 
 
\t <style type="text/css"> 
 
     body { 
 
      \t background-color: #F0FFF0; 
 
      \t color: rgb(255,255,255); 
 
      \t font-family: monospace; 
 
      \t font-style: italic; 
 
      \t font-weight: bold; 
 
      \t font-size: 20px; 
 
     } 
 
     .main-heading { 
 
      \t background-color: #0048ba; 
 
      \t text-align: center; 
 
      \t font-size: 35px; 
 
      \t font-weight: bold; 
 
      \t margin: 0px; 
 
     } 
 
     #login{ 
 
      \t background-color: #00FFFF; 
 
      \t float: right; 
 
      \t width: 70%; 
 
      \t height: 40%; 
 
      \t position: absolute; 
 
      \t z-index: 2; 
 
     } 
 
     #about-blog{ 
 
      \t background-color: #A4DDED; 
 
      \t width: 30%; 
 
      \t height: 50%; 
 
      \t position: absolute; 
 
      \t z-index: 1; 
 
     } 
 
     /* all about links */ 
 
     a{ 
 
      \t background-color: #00FF00; 
 
      \t color: #00693E; 
 
      \t font-weight: Bold; 
 
      \t font-size: 25px; 
 
     } 
 
     a:visited{ 
 
      background-color: #DFFF00; 
 
      color: #FF7F00; 
 
     } 
 
     a:hover{ 
 
     \t background-color: #91A3B0; 
 
     \t color: rgb(0,0,0); 
 
     } 
 
     .left-margin{ 
 
     \t margin-left: 5px; 
 
     } 
 
     /* all about links*/ 
 
     </style> 
 
</head> 
 
<body> 
 
<!--facebook SDK--> 
 

 
<!-- Facebook SDK end--> 
 
    <!--page begin--> 
 
    <h1 class="main-heading">Here You Will Get</h1> 
 
    <!--Main Body Design--> 
 
    <div id="about-blog"> 
 
     <h2 class="left-margin">School Feeds</h2> 
 
     <p class="about-blog-para-one left-margin"> Visit our awesome blog,<br> here you will get updates about school</p> 
 
     <a class="left-margin school-feeds"href="http://kvians.weebly.com/school-feeds" target="_blank">Visit</a> 
 
    </div> 
 

 
    <div id="login"> 
 
     <h2>Login</h2> 
 
     <p>Login to <strong>Kvians</strong> from your facebook account, just click the login button here</p> 
 
    </div> 
 

 
</body> 
 
</html>

我怎么可以设置登录到正确和公正的重叠大约博客几个像素。

来源

2016-03-30 Yuvraaj Singh Jadon

对于未来的用户来说，请接受最好解决您的问题的答案（如果有的话） – LGSon

您的浮动功能不起作用，因为您也使用position: absolute。

我删除position: absolute，因为它只是给你在路上的问题，并添加float: left到#about-blog，这样一来，如果你想添加任何额外的信息，它将正常流动。

#login{ 
    background-color: #00FFFF; 
    float: right; 
    width: 70%; 
    height: 40%; 
    z-index: 2; 
} 
#about-blog{ 
    background-color: #A4DDED; 
    width: 30%; 
    height: 50%; 
    float: left;   /* added */ 
    z-index: 1; 
}

body { 
 
    background-color: #F0FFF0; 
 
    color: rgb(255,255,255); 
 
    font-family: monospace; 
 
    font-style: italic; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
} 
 
.main-heading { 
 
    background-color: #0048ba; 
 
    text-align: center; 
 
    font-size: 35px; 
 
    font-weight: bold; 
 
    margin: 0px; 
 
} 
 
#login{ 
 
    background-color: #00FFFF; 
 
    float: right; 
 
    width: 70%; 
 
    height: 40%; 
 
    z-index: 2; 
 
} 
 
#about-blog{ 
 
    background-color: #A4DDED; 
 
    width: 30%; 
 
    height: 50%; 
 
    float: left; 
 
    z-index: 1; 
 
} 
 
/* all about links */ 
 
a{ 
 
    background-color: #00FF00; 
 
    color: #00693E; 
 
    font-weight: Bold; 
 
    font-size: 25px; 
 
} 
 
a:visited{ 
 
    background-color: #DFFF00; 
 
    color: #FF7F00; 
 
} 
 
a:hover{ 
 
    background-color: #91A3B0; 
 
    color: rgb(0,0,0); 
 
} 
 
.left-margin{ 
 
    margin-left: 5px; 
 
} 
 
/* all about links*/

<!--facebook SDK--> 
 

 
<!-- Facebook SDK end--> 
 
    <!--page begin--> 
 
    <h1 class="main-heading">Here You Will Get</h1> 
 
    <!--Main Body Design--> 
 
    <div id="about-blog"> 
 
     <h2 class="left-margin">School Feeds</h2> 
 
     <p class="about-blog-para-one left-margin"> Visit our awesome blog,<br> here you will get updates about school</p> 
 
     <a class="left-margin school-feeds"href="http://kvians.weebly.com/school-feeds" target="_blank">Visit</a> 
 
    </div> 
 

 
    <div id="login"> 
 
     <h2>Login</h2> 
 
     <p>Login to <strong>Kvians</strong> from your facebook account, just click the login button here</p> 
 
    </div>

来源

2016-03-30 05:35:59 LGSon

如果您正在使用position:absolute尝试right:0代替float:right和left:0代替float:left

来源

2016-03-30 05:40:59

-1

试试这个代码：

#login{ 
       background-color: #00FFFF; 
       float: right; 
       clear: right; 
       width: 70%; 
       height: 40%; 
       position: absolute; 
       z-index: 2; 
      }

我加了clear: right;就可以了，我觉得它会起作用！

来源

2016-03-30 06:06:57 CharlesCraft50

如果您正在使用position:absolute您不能使用浮动COS元素被分离的文档，这就是为什么浮动属性不起作用。

您可以使用right:0或left:0，并且该元素将被强制在文档的左侧或右侧。

来源

2016-03-30 06:14:19

浮动属性不工作在我的css

回答

相关问题