04 - More about CSS Position
Please visit http://zhangwenli.com/blog/2014/07/30/04-more-about-css-position/ for full edition with code and images.
Author: http://zhangwenli.com
CSS position
The
position
CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.A positioned element is an element whose computed position property is
relative
,absolute
,fixed
orsticky
.An relatively positioned element is an element whose computed position property is relative.
An absolutely positioned element is an element whose computed position property is absolute or fixed.
A stickily positioned element is an element whose computed position property is sticky.
The
top
,right
,bottom
, andleft
properties specify the position of positioned elements.
This post talks about relative
, absolute
, and fixed
, which are three most frequently used position
values.
relative
When position: relative
is set to an element, and its top
is set to be 20px
, this element's position is lower than its original position at 20px
where position: relative
is not set. Similarly for right
, bottom
, and left
.
A typical mistake here is to think the element will be relative to its parent or the screen.
absolute
We usually use position: absolute
to set the element's position according the screen. But it can do more.
fixed
When we want some element to be at a fixed position when user scrolls down, position: fixed
is used.
Combination of position
Relative to Parent
Sometimes we need to set an element's position to be a certain value relative to its parent element. How can this be achieved?
First, set the position
of its parent to be relative
or absolute
(if you don't want to change the position of its parent, relative
will be OK).
Next, set the position
of the element to be absolute
and set its top
, right
, etc. values.
Now, the element is relative to its parent.
<div id="parent">
<div id="child">
</div>
</div>
#parent {
background-color: yellow;
width: 300px;
height: 200px;
margin: 50px;
position: relative;
}
#child {
background-color: green;
width: 50px;
height: 50px;
position: absolute;
top: 20px;
left: 30px;
}
If its parent's position
is not set explicitly, then it's static
by default. And an element of position: absolute
with a parent of position: static
will have a position relative to the parent's parent. If its parent's parent's position
is static
, then it will be relative to its parent's parent's parent, etc. In the end, it will be relative to the screen.
#parent {
background-color: yellow;
width: 300px;
height: 200px;
margin: 50px;
}
#child {
background-color: green;
width: 50px;
height: 50px;
position: absolute;
top: 20px;
left: 30px;
}
Fixed Position
You may already know that setting position: fixed
can make an element stay the same position when user scrolls down.
#parent {
background-color: yellow;
width: 300px;
height: 200px;
margin: 50px;
}
#child {
background-color: green;
width: 50px;
height: 50px;
position: fixed;
top: 20px;
left: 30px;
}
If, however, you want to make an element fixed to its parent, you may refer to this answer at StackOverflow. A quick conclusion here is there's no elegant solution currently.
Homework
Try with different combinations of position
and raise questions if you may.
Author: http://zhangwenli.com
相關文章
- The ITer should learn more about ITIL
- Getting More Information about PartitionsORM
- css positionCSS
- CSS之positionCSS
- CSS position:sticky與position:fixed 區別CSS
- CSS background-positionCSS
- css的position:absoluteCSS
- CSS的定位:positionCSS
- CSS之定位PositionCSS
- CSS position:sticky 粘性定位CSS
- CSS position: sticky 粘性定位CSS
- CSS position定位(fixed、sticky)CSS
- CSS之Position詳解CSS
- css知多少(11)——positionCSS
- CSS position:absolute 絕對定位CSS
- CSS position: absolute 絕對定位CSS
- CSS position:fixed 固定定位CSS
- CSS position: fixed 固定定位CSS
- css [background-position] 單位CSS
- CSS之float vs position:absoluteCSS
- Css 中的position屬性CSS
- css系列之position與floatCSS
- CSS position:relative 相對定位CSS
- CSS position: relative 相對定位CSS
- 淺談CSS中的Position(定位)CSS
- CSS:層疊樣式表—positionCSS
- CSS background position 背景定位的用法CSS
- CSS position fixed和absolute區別CSS
- [轉載]CSS之Position詳解CSS
- 解決CSS position:fixed 相容問題CSS
- css 盒子模型和position總結CSS模型
- css position:absolute align center bottomCSS
- css切背景圖片(background-position)CSS
- web前端css定位position和起浮floatWeb前端CSS
- CSS-背景位置-x|background-position-xCSS
- 【HTML / CSS】使用position自適應佈局HTMLCSS
- CSS中Position、Float屬性深入探討CSS
- CSS系列 (04):盒模型詳解CSS模型