CSS定位在构建图形化组件上变得非常臃肿, 在这节中, 我们需要记住它和它的使用.
Static
默认的定位类型, 如果没有显示的设定position, 则使用这个. 下面例子说明了这个特点.
代码名称
<style> /* basic style */
.widget {
background-color: #ffe4c4;
width: 500px;
}
#today-header {
background-color: #5f9ea0;
margin: 0;
}
</style>
<h1>Static positioning</h1>
<div class="widget">
The widget header.
<h1 id="today-header">Information</h1>
<p>A new byte-code standard is defined for JavaScript... <br/>
Ok, just dreaming.</p>
</div>
The footer.
一个position: static元素也叫做不是定位元素. 其他任何position类型都是一个position元素.
Relative
元素可以相对于他的位置, 设定position.
使用相对定位, 你必须定义: position: relative 的CSS属性且一个或者两个坐标值:
-
top/bottom
-
left/right
通过都是选择一对X,Y坐标形式. 元素通过给定的距离移动.看看下面的代码例子:
代码名称
<style> /* basic style */
.widget {
background-color: #ffe4c4;
width: 500px;
}
#today-header {
background-color: #5f9ea0;
margin: 0;
}
</style>
<style>
.widget{
position: relative;
left: 30px;
top: -30px;
}
</style>
<h1>Relative positioning</h1>
<div class="widget">
The widget header.
<h1 id="today-header">Information</h1>
<p>A new byte-code standard is defined for JavaScript... <br/>
Ok, just dreaming.</p>
</div>
The footer.
我们可以看到上面的例子代码, 元素被移动了:
-
left: 30px
:在默认的位置向左移动30个像素. -
top: -30px
: 如果是设定"30px", 元素会从默认位置向下移动. 但是因为是负值, 他会向上移动
left/top在position: static上不起作用:
position: relative移动元素, 但是这个位置他是占据的. 上面的例子中, the footer不会往上移动, 因为position元素还是占据了原来的空间.
Fixed
这个类型在IE<8下是不支持的, 我们来模拟这个行为.
两件事情会做:
-
从他的位置移除.另外的元素会移动到他的之前位置.
-
移动这个元素到相对的窗口. 是window,不是document.当页面滚动, 这个fixed元素还是会保持在相对窗口的位置.
在下面的例子中, 页面滚动,但是#go-top链接总是在相同的位置
代码名称
<style>
#go-top {
position: fixed;
right: 10px;
top: 10px;
font-size: 125%;
}
</style>
<a href="#top" id="go-top">Scroll, I don't move!</a>
<h1 id="top">Fixed positioning</h1>
The widget header.
<div class="widget">
<h1 id="today-header">Information</h1>
<p>A new byte-code standard is defined for JavaScript... <br/>
Ok, just dreaming.</p>
<p>SquirrelFish is a register-based, direct-threaded, high-level bytecode engine, with a sliding register window calling convention. It lazily generates bytecodes from a syntax tree, using a simple one-pass compiler with built-in copy propagation.</p>
</div>
The footer.
Absolute
绝对定位是很重要的.
他会做两件事:
-
他的位置会被移除. 另外的元素会占据他的位置.
-
移动元素到他相对的position的父元素, 如果没有position的父元素, 则会移动到document.
最近的定位父元素不包含static的position.
下面例子中widget是局对定位的. 因为没有一个定位父元素, widget元素移动到文档右下角.
代码名称
<style>
@import url(/files/tutorial/browser/dom/poscolor.css)
</style>
<style>
.widget{
border: 1px solid black;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<h1>Absolute positioning</h1>
<div class="widget">
The widget header.
<h1 id="today-header">Information</h1>
<p>A new byte-code standard is defined for JavaScript... <br/>
Ok, just dreaming.</p>
</div>
The footer.
widget元素从这流中移除, 因此 "the footer"移动到他之前的位置.
Absolute
在定位的父元素里
定位一个头部到widget的右上角. 下面使用绝对定位:
代码名称
<style>
@import url(/files/tutorial/browser/dom/poscolor.css)
</style>
<style>
.widget{
position: relative;
}
#today-header {
position: absolute;
right: 0px;
top: 0px;
}
</style>
# Absolute positioning
<div class="widget">
The widget header.
<h1 id="today-header">Information</h1>
<p>A new byte-code standard is defined for JavaScript... <br/>
Ok, just dreaming.</p>
</div>
The footer.
在上面的例子中, #today-header
绝对定位到他最近的定位父元素的右上角… .widget 元素
,因为他的定位大不是 static的定位元素
.
设置position:relative的通用方法: 确保元素是定位元素, 内部的绝对定位元素就会相对于他而言.
有时候这种方式很好, 但是我们需要保持这个位置的时候, 就得需要添加其他额外的样式属性.
编程的人正在在线培训
"前端编程开发","后端开发","移动开发"等,
需要学习的可以加入群或者微信留言
原创内容,转载请注明出处.
公众微信号:bianchengderen
QQ群:186659233
欢迎大家传播与分享.
融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.