20161222

今天做靜態(tài)頁練習(xí),果然在實(shí)踐的時(shí)候會發(fā)現(xiàn)很多問題俏险,哪些知識點(diǎn)還沒搞懂,先照著人家的效果圖實(shí)現(xiàn)了一個(gè)很簡單的靜態(tài)頁,然后覺得position float還沒搞懂

1.position:relative; 如果對一個(gè)元素進(jìn)行相對定位逆粹,首先它將出現(xiàn)在它所在的位置上。然后通過設(shè)置垂直或水平位置炫惩,讓這個(gè)元素"相對于"它的原始起點(diǎn)進(jìn)行移動(dòng)僻弹。(再一點(diǎn),相對定位時(shí)他嚷,無論是否進(jìn)行移動(dòng)蹋绽,元素仍然占據(jù)原來的空間。因此筋蓖,移動(dòng)元素會導(dǎo)致它覆蓋其他框)

相對定位:relative 沒有脫離正常的文檔流卸耘,被設(shè)置元素相對于其原始位置而進(jìn)行定位,其原始占位信息仍存在

2.position:absolute; 表示絕對定位粘咖,位置將依據(jù)瀏覽器左上角開始計(jì)算蚣抗。 絕對定位使元素脫離文檔流,因此不占據(jù)空間涂炎。普通文檔流中元素的布局就像絕對定位的元素不存在時(shí)一樣忠聚。(因?yàn)榻^對定位的框與文檔流無關(guān),所以它們可以覆蓋頁面上的其他元素并可以通過z-index來控制它層級次序唱捣。z-index的值越高两蟀,它顯示的越在上層。)

絕對定位:ablution 脫離了文檔流與浮動(dòng)模型震缭,獨(dú)立于其他對象而存在赂毯,沒有占位。

3.父容器使用相對定位拣宰,子元素使用絕對定位后党涕,這樣子元素的位置不再相對于瀏覽器左上角,而是相對于父窗口左上角

摘自《一只羊博客》

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末巡社,一起剝皮案震驚了整個(gè)濱河市膛堤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌晌该,老刑警劉巖肥荔,帶你破解...
    沈念sama閱讀 219,366評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件绿渣,死亡現(xiàn)場離奇詭異,居然都是意外死亡燕耿,警方通過查閱死者的電腦和手機(jī)中符,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來誉帅,“玉大人淀散,你說我怎么就攤上這事⊙料牵” “怎么了档插?”我有些...
    開封第一講書人閱讀 165,689評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長亚再。 經(jīng)常有香客問我阀捅,道長,這世上最難降的妖魔是什么针余? 我笑而不...
    開封第一講書人閱讀 58,925評論 1 295
  • 正文 為了忘掉前任饲鄙,我火速辦了婚禮,結(jié)果婚禮上圆雁,老公的妹妹穿的比我還像新娘忍级。我一直安慰自己,他們只是感情好伪朽,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,942評論 6 392
  • 文/花漫 我一把揭開白布轴咱。 她就那樣靜靜地躺著,像睡著了一般烈涮。 火紅的嫁衣襯著肌膚如雪朴肺。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,727評論 1 305
  • 那天坚洽,我揣著相機(jī)與錄音戈稿,去河邊找鬼。 笑死讶舰,一個(gè)胖子當(dāng)著我的面吹牛鞍盗,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播跳昼,決...
    沈念sama閱讀 40,447評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼般甲,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了鹅颊?” 一聲冷哼從身側(cè)響起敷存,我...
    開封第一講書人閱讀 39,349評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎堪伍,沒想到半個(gè)月后锚烦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體滔岳,經(jīng)...
    沈念sama閱讀 45,820評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,990評論 3 337
  • 正文 我和宋清朗相戀三年挽牢,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片摊求。...
    茶點(diǎn)故事閱讀 40,127評論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡禽拔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出室叉,到底是詐尸還是另有隱情睹栖,我是刑警寧澤,帶...
    沈念sama閱讀 35,812評論 5 346
  • 正文 年R本政府宣布茧痕,位于F島的核電站野来,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏踪旷。R本人自食惡果不足惜曼氛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,471評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望令野。 院中可真熱鬧舀患,春花似錦、人聲如沸气破。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽现使。三九已至低匙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間碳锈,已是汗流浹背顽冶。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留售碳,地道東北人渗稍。 一個(gè)月前我還...
    沈念sama閱讀 48,388評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像团滥,于是被迫代替她去往敵國和親竿屹。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,066評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案灸姊? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評論 1 92
  • 在CSS中關(guān)于定位的內(nèi)容是:position:relative | absolute | static | fix...
    feelinghappy618閱讀 637評論 0 0
  • CSS的position總是屬性很容易讓人弄混~ 為了仔細(xì)區(qū)別它們拱燃,所以今天總結(jié)一下CSS的position屬性~...
    fehysunny閱讀 2,924評論 0 7
  • 學(xué)習(xí)建議 定位碗誉、浮動(dòng)是 CSS 核心知識點(diǎn)召嘶,必須熟練掌握。 1.文檔流的概念指什么哮缺?有哪種方式可以讓元素脫離文檔流...
    饑人谷_任磊閱讀 1,089評論 0 3
  • CSS 定位 CSS有三種基本的定位機(jī)制:普通流尝苇,浮動(dòng)铛只,絕對定位(absolute, fixed):普通流是默認(rèn)定...
    _空空閱讀 5,740評論 0 15