html 元素定位position-relative, absolute, fixed, static
看到这个,你有什么想法?
Difference between static and relative positioning
如果你能完全看明白,那几本上css 元素定位的东西基本都会了。本文也不用往下看了。
自己接触web这么多年,虽说前端有接触过,但还是没有系统地学习过,和完整的实践过。很多东西是似懂非懂。其实这里就是问题的关键所在。
似懂非懂,其实本质上是不懂的。但是却又自以为懂, 这就是自己给自己设定了个障碍,这个障碍看似无形却比有形的障碍更可怕。因为每个人似乎
总是自以为是的认为自己认定的东西就是对的。因此很难,放空或者说归零, 来从头开始系统完整的学习一个新的东西。造成对新事物的理解总是停留
在陈旧的水平,故步自封。否定也许是进步的开始!!
------------------------------------------------------------------------------------------------
Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don't obey left
, top
, right
and bottom
rules:
Relative positioning allows you to specify a specific offset (left
, top
etc) which is relative to the element's normal position in HTML flow. So if I have a textbox inside a div
I could apply relative positioning on the textbox to have it display at specific place relative to where it would normally be placed within the div
:
There is also absolute positioning - whereby you specify the exact location of the element relative to the entire document, or the next relatively positioned element further up the element tree:
And when a position: relative
is applied to a parent element in the hierarchy:
Note how our absolutely-position element is bound by the relatively-positioned element.
And lastly there is fixed. Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll:
You may also observe the behaviour that fixed-positioned elements do not cause scroll because they are not considered to be bound by the viewport:
Whereas absolutely-positioned elements are still bound by the viewport and will cause scrolling:
..unless of course your parent element uses overflow: ?
to determine the behaviour of the scroll (if any).
With absolute positioning and fixed positioning, the elements are taken out of HTML flow.