小伙伴們學習了12-6小節的絕對定位的方法:使用`position:absolute`可以實現被設置元素相對于瀏覽器(body)設置定位以后,大家有沒有想過可不可以相對于其它元素進行定位呢?答案是肯定的,當然可以。使用`position:relative`來幫忙,但是必須遵守下面規范:
1、參照定位的元素必須是相對定位元素的前輩元素:
~~~
<div id="box1"><!--參照定位的元素-->
<div id="box2">相對參照元素進行定位</div><!--相對定位元素-->
</div>
~~~
從上面代碼可以看出box1是box2的父元素(父元素當然也是前輩元素了)。
2、參照定位的元素必須加入position:relative;
~~~
#box1{
width:200px;
height:200px;
position:relative;
}
~~~
3、定位元素加入position:absolute,便可以使用top、bottom、left、right來進行偏移定位了。
~~~
#box2{
position:absolute;
top:20px;
left:30px;
}
~~~
這樣box2就可以相對于父元素box1定位了(這里注意參照物就可以不是瀏覽器了,而可以自由設置了)。
- HTML+CSS基礎
- HTML
- Html和CSS的關系
- 認識html文件基本結構
- 了解HTML的代碼注釋
- 語義化,讓你的網頁更好的被搜索引擎理解
- 加入強調語氣,使用<strong>和<em>標簽
- <q>標簽,短文本引用
- <hr>標簽,添加水平橫線
- <address>標簽,為網頁加入地址信息
- caption標簽,為表格添加標題和摘要
- CSS
- CCS子選擇器
- CSS包含(后代)選擇器
- CSS通用選擇器
- CSS偽類選擇符
- CSS分組選擇符
- CSS繼承
- CSS特殊性
- CSS層疊
- CSS重要性
- 段落排版--中文字間距、字母間距
- 元素分類--塊級元素
- 元素分類--內聯元素
- 元素分類--內聯塊狀元素
- 什么是層模型?
- 層模型--絕對定位
- 層模型--相對定位
- 層模型--固定定位
- Relative與Absolute組合使用