我是前端开发的新手-HTML / CSS。我在玩CSS属性：“ Float”和“ Position：Fixed”。当我运行代码时（如下所示），我得到一个输出，其中浮动文本和＃static3 div标签中的文本以某种方式隐藏自身的方式，使某些文本隐藏在固定文本的后面。为了使输出正确显示，我对float文本和＃static3文本都应用了margin属性。对于浮点文本，输出已得到纠正，但对于＃static3文本，当我应用margin属性时，整个页面向下移动。两者都在单独的“ div”标签（块元素）下定义，因此它们为什么工作不同。
请帮忙。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>This is a layout example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="CSS/Layyouts.css" type="text/css">
</head>
<body>
<div id="static1">This position changes</div>
<div id="static2">
This is some text thats using float attribute to be placed on right side while other text goes around and i need to make this text long to have a better look when this page is turned into a html page so better i write more
</div>
<div id="static3">This is a random text for the static example. There are many different ways you can use our services – to search for and share information, to communicate with other people or to create new content. When you share information with us, for example by creating a Google Account, we can make those services even better – to show you more relevant search results and ads, to help you connect with people or to make sharing with others quicker and easier. As you use our services, we want you to be clear how we’re using information and the ways in which you can protect your privacy.
Our Privacy Policy explains:
What information we collect and why we collect it.
How we use that information.
The choices we offer, including how to access and update information.
We’ve tried to keep it as simple as possible, but if you’re not familiar with terms like cookies, IP addresses, pixel tags and browsers, then read about these key terms first. Your privacy matters to Google so whether you are new to Google or a long-time user, please do take the time to get to know our practices – and if you have any questions consult this page.
</div>
<div id="static4">This is a random text for the static example. There are many different ways you can use our services – to search for and share information, to communicate with other people or to create new content. When you share information with us, for example by creating a Google Account, we can make those services even better – to show you more relevant search results and ads, to help you connect with people or to make sharing with others quicker and easier. As you use our services, we want you to be clear how we’re using information and the ways in which you can protect your privacy.
Our Privacy Policy explains:
What information we collect and why we collect it.
How we use that information.
The choices we offer, including how to access and update information.
We’ve tried to keep it as simple as possible, but if you’re not familiar with terms like cookies, IP addresses, pixel tags and browsers, then read about these key terms first. Your privacy matters to Google so whether you are new to Google or a long-time user, please do take the time to get to know our practices – and if you have any questions consult this page.
</div>
<div id="static5">This is a random text for the static example. There are many different ways you can use our services – to search for and share information, to communicate with other people or to create new content. When you share information with us, for example by creating a Google Account, we can make those services even better – to show you more relevant search results and ads, to help you connect with people or to make sharing with others quicker and easier. As you use our services, we want you to be clear how we’re using information and the ways in which you can protect your privacy.
Our Privacy Policy explains:
What information we collect and why we collect it.
How we use that information.
The choices we offer, including how to access and update information.
We’ve tried to keep it as simple as possible, but if you’re not familiar with terms like cookies, IP addresses, pixel tags and browsers, then read about these key terms first. Your privacy matters to Google so whether you are new to Google or a long-time user, please do take the time to get to know our practices – and if you have any questions consult this page.
</div>
<div id="static6">This is a random text for the static example. There are many different ways you can use our services – to search for and share information, to communicate with other people or to create new content. When you share information with us, for example by creating a Google Account, we can make those services even better – to show you more relevant search results and ads, to help you connect with people or to make sharing with others quicker and easier. As you use our services, we want you to be clear how we’re using information and the ways in which you can protect your privacy.
Our Privacy Policy explains:
What information we collect and why we collect it.
How we use that information.
The choices we offer, including how to access and update information.
We’ve tried to keep it as simple as possible, but if you’re not familiar with terms like cookies, IP addresses, pixel tags and browsers, then read about these key terms first. Your privacy matters to Google so whether you are new to Google or a long-time user, please do take the time to get to know our practices – and if you have any questions consult this page.
</div>
</body>
</html>
CSS代码：
#static1{
position: fixed;
width: 100%;
text-align: center;
font-size: 24px;
font-family: cursive;
font-weight: bold;
text-transform: capitalize;
background-color: lightgrey;
margin: 0px;
}
#static2{
width: 200px;
float: right;
border-top: 2px black solid;
border-bottom: 2px black solid;
margin: 50px 4px 4px 4px;
padding: 2px 2px 2px 2px;
}
#static3{
margin-top: 50px;
}
FIDDLE
最佳答案
编辑，我想我明白你的意思。当您向static3添加边距时整个页面向下移动的原因是由于这些原因：static1具有position:fixed，但没有实际位置属性（top，right，left，bottom），因此它相对于以下元素static2定位自身static2元素具有float:right属性，因此它相对于static3定位（其margin-top相对于static3的顶部位置而不是body的顶部进行计算）
这样，页面中的所有元素都相对于static3 div上的位置定位。当您向该元素添加边距时，其他两个相对于新坐标重新计算其位置。
旧答案
不确定您要实现的目标，但是如果目标是“文章”不被其“标题”（#static1）覆盖，则只需在top:0中添加一个#static1属性即可：
的CSS
#static1{
top:0; // ADDED THIS LINE
position: fixed;
width: 100%;
text-align: center;
...
DEMO
关键是在使用
position: fixed时必须指定位置，否则浏览器将理解您的元素一定不能从其原始位置移动，但不必将其呈现在所需的位置。在这里，浏览器了解到static1必须呈现为“在static3的顶部，然后无论如何都将其固定在那里”