固定的CSS位置根本不起作用答案

【问题标题】：css position fixed not working at all固定的CSS位置根本不起作用
【发布时间】：2018-02-11 04:05:54
【问题描述】：

我希望为blakehawley.com 制作一个页脚类型的东西，它有一些不同的链接等。它应该是横幅样式，我的意思是它应该留在底部并被固定。 div是“菜单”

这是我的 HTML：

    <html>

<head>
<link rel="stylesheet" media="all and (min-width: 1378px)" href="style/grid-1378.css">
<link rel="stylesheet" media="all and (min-width: 1218px) and (max-width: 1377px)" href="style/grid-1218.css">
<link rel="stylesheet" media="all and (min-width: 978px) and (max-width: 1217px)" href="style/grid-978.css">
<link rel="stylesheet" media="all and (min-width: 748px) and (max-width: 977px)" href="style/grid-748.css">
<link rel="stylesheet" media="all and (min-width: 0px) and (max-width: 747px)" href="style/grid-400.css">

<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>

<title>The Official Site of Blake Hawley</title>

</head>
<body>

<div id="homeimage">
<img src="style/images/blakehome.jpg">
</div>

<div id="name">
Blake Hawley
</div>

<div id="maincontent">

<a class="twitter-timeline" href="https://twitter.com/BlakeHawley5" data-widget-id="414439781083267072">Tweets by @BlakeHawley5</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</div>

<div id="menu">

</div>

</body>
</html>

这是我的 CSS：

body{
margin:0 auto;
}

#homeimage{
margin:0 auto;
margin-top:20px;
width:720px;
height:480px;
box-shadow:5px 5px 5px #888888;
}

#name{
text-align:center;
font-family:'Playfair Display', serif;
font-size:130px;
}

#maincontent{
margin-bottom:20px;
}

#menu{
position:fixed;
float:bottom;
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}

li{
list-style:none;
}

你们看到了什么？

【问题讨论】：

再次提醒我float:bottom; 到底是什么:-) ??将其定位为bottom:0;，如下所示。
感谢您的聪明评论，非常有帮助。

标签： html css web

【解决方案1】：

#menu{
position:fixed;
bottom: 0px;
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}

猜对了，改了第二条规则

（也可以设置宽度：100%）

【讨论】：

我会尽快检查你的

【解决方案2】：

浮动用于某些文本中的图像，可以是左或右，而不是浮动，你应该使用定位，在你的情况下：

bottom:0px;

另外，如果您希望页脚占据整个屏幕，请使用

width:100%;

【讨论】：

【解决方案3】：

首先菜单标签是空的（因为它你看不到它）。

其次，您没有使用左、上、下或右属性定位它。

第三个没有像“float:bottom;”这样的东西

【讨论】：

是的。好点@elad。在 div 中添加&nbsp; 以方便查看。

【解决方案4】：

#menu{
position:fixed;
margin:0 auto;/*use it if you want to show middle of the webpage if not remove it*/
left:/* put*/ px;/* use it if you want to move your div from the left postion*/
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}

keep remember float:bottom is not correct rule more info visit www.w3schools.com !

【讨论】：

【解决方案5】：

Why isn't "position:fixed;" keeping my page header in the same place?

这是由于 #pageTitle 的 display:flex 造成的。展开时的菜单试图适应，将其他元素推送到同一个父 div 中。将 .responsive-menu 与 #pageTitle 分离到一个新的 div 中。

【讨论】：