logo标签列表

如何向普通人解释CSS定位？

css
12

各位地球人。

我，相对身心健康，宣布放弃自行理解CSS定位。

CSS在线资源会详尽地解释，“color”属性让您设置“颜色”，这是不可思议的。

然后，如果您想将某个东西放在另一个东西的左边（疯狂的想法，对吧？），您只需要将其设置为向左浮动，同时为其父块设置“relative”标志，该父块必须有一个祖先节点，其“absolute”标志设置为true，以便相对于其他可能包含任何内容、具有位置、大小或没有位置和大小的容器进行定位，这取决于浏览器、其他东西的大小以及可能的月相。（建议CSS专家不要认真对待上一段话。我非常确定有人会指出我的抱怨不成立，也不符合w3c规范——它只适用于IE6的瑞典测试版）

开玩笑了，我正在寻找任何解释CSS布局混乱根本原因的资源。本质上，我需要的是CSS的Crockford文章。

在这个精神下，让我指出，我不是在寻找像blueprint这样的CSS库或网格框架，也不是在寻找像lesscss这样的CSS扩展语言。我一直在使用它们来减轻我的痛苦，但我担心这会像告诉某个人“只需使用jQuery”，当他们说他们无法理解JS中的原型继承时。

如果您能指向的唯一资源就是http://shop.oreilly.com/product/9781565926226.do，那我想我会认为自己注定了。

提前感谢。

编辑：我可能不应该谈论“定位”（感谢所有解释的人，再次说明“position:relative”并不意味着“相对于容器”，而“position:absolute”是相对于某物的。我从未如此接近将SO问题制作成蒙提·派森剧本）。我想我指的是布局（定位+浮动+基线+放置东西所需的所有无聊操作来将它们放在一条直线上）。

同时请原谅我发牢骚的语气，我试图将一些幽默倾泻到挫折中。如果可以的话，我会使用禅宗技巧来冷静下来，但这只会让我想起这个。

1
阅读CSS 2.1规范（第9章）。理解一件事需要时间。你已经尝试了多久？ - Šime Vidas
我理解你的痛苦。又一个我们将会使用数十年的专业术语 :) - drogon
一切都关乎内容，而规范告诉你所有东西应该如何工作。 - zzzzBov
@ŠimeVidas 我说的是“人类”，这不应该隐含排除任何由w3c编写的东西吗 ;) ? - phtrivier
@phtrivier 在这里CSS规范是个例外。它易于阅读，有很多图片和代码示例。试试吧 :) - Šime Vidas
6个回答
3
定位（Positioning）很容易理解：
相对定位（relative positioning）-- 正常呈现页面。完成后，带有相对定位的元素会被移动，相对于其最初位置。其他元素不受影响。
绝对定位（absolute positioning）-- 从页面流中删除该项目。其他内容呈现就像没有它一样，即它们填充了此项占用的空间。现在它们是相对于具有设置position: relative或position: absolute的最近元素定位。在许多情况下，这意味着它们是相对于body标签绝对定位。
然后您可以使用CSS中的top、right、bottom和left来定位元素。
如果某物设置了absolute定位：

  • 使用top和left时相对于页面的左上角定位。使用bottom和right时相对于页面的右下角定位。

  • 可以通过top / bottom或left / right组合控制其宽度/高度，例如： top: 100px; bottom: 100px将使该项为其父元素高度的100% - 200px（除非您还指定了高度，在这种情况下使用top和height，而忽略bottom）。

谢谢您的解释，尽管这并没有涵盖浮点数（它似乎是解决我极其复杂的“把东西放在一起”的用例必要的）。此外，当您写道“它的宽度/高度可以通过上/下或左/右的组合来控制”时，您是否仍然意识到它听起来多么荒谬（虽然可能在技术上是正确的）？ - phtrivier
宽度/高度的问题并不荒谬，这是一种不同的做事方式。如果您有一个灵活大小的父级（例如窗口），并且想要一个占据90％宽度的页脚栏，可以编写left: 5％; right: 5％; bottom: 0px; height: 50px;。如果手动指定width，则需要JS执行相同的操作。我在任何可能的情况下都避免使用浮动，并始终建议其他人也这样做。 - user578895
等一下，有没有更简洁的方法让一堆宽度未知的div元素并排（就像“一行”一样）排列在右侧，而不必“浮动它们并在结尾添加clear:both”？我原以为大多数网格框架都是这么做的... - phtrivier
3
似乎大多数人没有完全理解您的帖子的要点。我会为您分解一下：
CSS定位很复杂，因为它是由许多不同的团队在长时间内设计的，有各种版本和遗留兼容性问题。
最初的尝试是保持简单。只提供基本样式。颜色、字体、大小、边距等。他们添加了浮动以提供基本的“cutout”功能，使文本环绕图像。Float并不打算像目前使用的那样成为主要布局功能。
但人们对此并不满意。他们想要列、网格、框和阴影、圆角和各种其他东西，这些都是在不同的阶段添加的。同时还试图保持与先前不良实现的兼容性。
HTML受到两个敌对派别的折磨。一方希望简单（与现有SGML相比），另一方则希望拥有丰富的应用程序。因此，CSS有时具有这种精神分裂的特性。
更重要的是，功能被扩展以执行最初不打算执行的操作。这使得现有的实现都非常有缺陷。
那对于你这个普通人来说意味着什么呢？这意味着你被困在处理别人的脏衣服中。这意味着你必须处理十年前的实现漏洞。这意味着你要为不同的浏览器编写不同的CSS，或者你必须限制自己使用常见的“良好支持”的功能集，这意味着你无法充分利用最新的CSS所能做到的（也不能使用旨在为标准增加一些理智的功能）。在我看来，没有比这本书更适合“普通人”理解CSS了。

http://www.amazon.com/Eric-Meyer-CSS-Mastering-Language/dp/073571245X

它简单、简洁，以光滑的“易于阅读”的格式提供真实世界的例子，并省略了大部分令人讨厌的技术术语。虽然已有10年历史，但可以让你理解事物的运作方式。
1
0

Code Academy的这两门课程应该很好地解释了CSS定位：

第一门, 第二门。

0
0

你看过这本很棒的书吗？http://shop.oreilly.com/product/9781565926226.do

只是开玩笑。

我认为你不需要专门为这个问题提供整个资源。一旦理解了，它就相当简单。

将CSS定位视为一种将项目相对定位（无论它们在页面上的位置如何）或绝对定位在X/Y坐标上的方法。

您可以相对定位某些内容，它将随着正数向上或向右移动，随着负数向下或向左移动。

如果您绝对定位一个元素，它将从布局中删除自己（其他元素不会将其识别为在屏幕上），然后执行以下两种操作之一。 它要么：

1-从页面的左上角定位自己，并根据先前提到的数字是+/-而上/下右/左移动。

2- 如果父元素被定位为绝对或相对，则它将从父元素的左上“角”定位自己，而不是浏览器窗口。

将z-index视为Photoshop中的图层。0表示底部（新版浏览器还可以识别负z索引以获得更多乐趣），100表示顶部（新版浏览器可以识别无限数量的数字）。z-index仅适用于position：relative和absolute。

因此，如果我将某个元素定位为absolute，并且它恰好落在另一个元素下面，我可以给它z-index：100，它将自动定位在顶部。请记住，元素本身是一个矩形，元素的高度/宽度可能会妨碍您单击下面的元素。您无法使用纯CSS进行角度、圆等操作。

这有帮助吗？

我可能用词不当，把“定位”说成了“位置”，实际上我是指“布局”，比如“你能不能把这些该死的东西放在这个该死的东西的右边！”我提到这本书是因为它已经无助地装饰了我的桌子几年了... - phtrivier
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接