Question

我是前端开发的新手 - 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

Answer 1

编辑我想我明白你的意思。向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的顶部进行渲染，然后无论如何都在那里修复“

Answer 2

我不知道CSS解析器的内部工作原理，但我可以告诉你，在＃static3 <中将 margin-top 更改为 padding-top / strong>部分确实解决了这个问题。

我去过那里，这就是我如何解决我的问题。试试吧。

使用边距和填充属性

2 个答案: