CSS定位无法正常工作 [英] CSS Positioning is not working as expected
问题描述
这是我的代码
CSS
h2
{
position: absolute;
left: 100px;
top: 150px;
}
h1
{
position: fixed;
top: 300px;
}
HTML
<h1>
Heading for Fixed Position
<h2>
This is a heading with an absolute position</h2>
</h1>
我是CSS的新手，所以正在尝试定位.我在哪里读到了
I'm new to CSS so was experimenting with positioning. I read some where
绝对位置元素相对于具有非静态位置的第一个父元素放置.如果找不到这样的元素，则包含的块为
<html>:
如果正确，则This is a heading with an absolute position消息必须在Heading for Fixed Position以下，因为h1是父对象，而h2是绝对对象，因此必须相对于h1定位.如果我错了，请更正.
If that is right then This is a heading with an absolute position message must be below the Heading for Fixed Position since h1 is the parent object and h2 being a absolute object must be positioned relative to h1. Please correct if I'm wrong.
这是JSFiddle链接:
Here is the JSFiddle link:
推荐答案
我想向您解释定位实际上是如何工作的，有4种类型
I would like to explain you how positioning actually works, there are 4 types
- 静态(默认)
- 相对
- 绝对
- 固定
静态位置不过是文档的正常流程，其中元素在另一个元素之后呈现(不包括浮点数)
Static position is nothing but a normal flow of the document where elements render on after the another (Excluding floats)
相对位置是一个特殊的东西，当与绝对位置一起使用时，相对功率是很大的.当您要使用顶部，左侧，底部和右侧而不是边距时，需要为该元素分配position: relative;，然后，顶部，左侧，右侧和底部属性将起作用.
Relative position is something special, which turns out to be a great power when used with position absolute. When you want to use top, left, bottom and right instead of margins, you need to assign position: relative; to that element, after doing so, top, left, right and bottom properties will work.
使用position: absolute;时，它会脱离文档流，因此如果您有一个名为div宽度类a的元素.现在，如果将position: absolute;分配给类a，它将退出文档流，因此，当您使用top: 0;时，它将飞到文档顶部.因此，为了限制它，我们用包装一个容器position: relative;，这样当您使用position: absolute;时，它将对那个特定元素而不是整个文档都是绝对的.
When you use position: absolute; it gets out of the document flow, so if you have an element called div width class a. Now if you assign position: absolute; to class a, it will get out of the document flow, so when you use top: 0; it will fly away to the top of the document. So in order to restrict it, we wrap a container with position: relative; so that when you use position: absolute;, it will be absolute to that particular element and not the entire document.
固定位置是完全不同的，它也与position: absolute;一样不在文档流中，但是不同之处在于，固定位置的元素不能相对于任何元素，它与任何元素都没有接触，总是从窗口的顶部，左侧，右侧和底部(而不是元素)计算得出的结果，当用户滚动文档时，还会流过一个固定位置的元素.
Position fixed is entirely different, it is also out of the document flow as same as position: absolute; but the difference is that fixed positioned element cannnot be relative to any element, it has no contact whatsoever with any element, it is always calculated from the top, left, right and bottom of the window and not the element, also a fixed position element will flow as the user scrolls the document.
回答，您使用的是固定位置和绝对位置，两者都超出了文档流程，因此它们之间没有任何关系...
Coming to your answer, you are using fixed position and absolute position, both are out of the document flow, so they have no relation what so ever...
您将top: 300px;用于固定位置，并将top:: 150px;用于绝对定位的元素，因此，固定元素将在绝对元素下方呈现，但是当您尝试滚动时，固定元素将沿着position: absolute;的位置滚动元素不会.
You are using top: 300px; for fixed position and top:: 150px; for absolute positioned element, so the fixed element will render below the absolute element, but when you try to scroll, your fixed element will scroll along where as position: absolute; element won't.
根据评论进行编辑
转到w3c验证程序并验证您的文档此处
Go to w3c Validator and validate your document here
这篇关于CSS定位无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
