Css定位无法正常工作 [英] Css positioning not working as expected
问题描述
这是我的HTML代码
CSS
h2
{
position：absolute;
left：100px;
top：150px;
}
h1
{
position：fixed;
top：300px;
}
HTML
< h1>
固定位置的航向
< h2>
这是一个标题，其绝对位置< / h2>
< / h1>
我刚刚接触css，所以正在试验定位。我读了一些
绝对位置元素相对于具有非静态位置的第一个父元素定位。如果没有找到这样的元素，则包含块是< html>：
这是一个绝对位置消息的标题必须在固定位置标题之下，因为h1是父对象， h2是绝对对象必须相对于h1定位。如果我错了，请更正。
这里是jsfiddle
- 相对
- 绝对
- 固定
li>静态（默认）
静态位置只是元素在另一个元素之后呈现的文档的正常流程（排除浮动广告）
相对位置是一个特殊的东西，当使用位置绝对时，这是一个伟大的力量。当你想使用顶部，左边，底部和右边而不是边距，你需要分配 position：relative; 到那个元素，这样做后，top，left，right
当使用 position：absolute; 时，如果你有一个叫做 div width class a 的元素。现在，如果您将 position：absolute; 分配给类 a ，它将退出文档流程，使用 top：0; 它会飞到文档的顶部。因此，为了限制它，我们使用 c：c：position：relative; 包装一个容器，以便在使用 position：absolute ; ，它将是绝对的那个特定的元素，而不是整个文档。
位置固定完全不同，也可以和 position：absolute; 一样，但区别在于固定的定位元素不能相对于任何元素，它与任何元素没有任何联系，它总是从窗口的顶部，左侧，右侧和底部计算而不是元素，固定位置元素也会随着用户滚动文档而流动。
< hr>
回到你的答案，你使用的是固定位置和绝对位置，都是在文档流程之外，所以他们没有什么关系...
您使用 top：300px; 表示固定位置， top :: 150px; 绝对定位元素，所以固定元素将渲染下面的绝对元素，但当你尝试滚动，你的固定元素将滚动沿 position：absolute; 元素不会。
按照您的注释进行编辑
转到w3c验证程序并验证您的文档此处
>
Here is my html code
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>
i'm new to css so was experimenting with positioning.I read some where
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
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.
Here is the jsfiddle
I would like to explain you how positioning actually works, there are 4 types
- Static (Default)
- Relative
- Absolute
- Fixed
Static position is nothing but a normal flow of the document where elements render on after the another (Excluding floats)
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.
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 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...
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.
Edit as you commented
Go to w3c Validator and validate your document here
这篇关于Css定位无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
