(4.8)--3.8定位Web前端攻城狮.pdf

《(4.8)--3.8定位Web前端攻城狮.pdf》由会员分享，可在线阅读，更多相关《(4.8)--3.8定位Web前端攻城狮.pdf（11页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、3.8定位position 属性static默认值，定位元素relative相对原本位置偏移，不脱离档流absolute绝对定位，相对 static 祖先元素定位fixed相对于视绝对定位position:relative在常规流布局相对于本应该在的位置进偏移使 top、left、bottom、right 设置偏移长度流内其它元素当它没有偏移样布局Cats are similar in anatomy to the other felids,with a strong flexible body,quick reflexes,sharp teeth and retractable claws

2、adapted to killing small prey.p font?size:20px;img position:relative;top:0px;left:0px;?styleCats are similar in anatomy to the other felids,with astrong flexible body,quick reflexes,sharp teeth andretractable claws adapted to killing small prey.Cat senses fit a crepuscular and predatoryecological ni

3、che.https:/s.codepen.io/webzhao/debug/roaKJv/xJMjOqawPexrposition:absolute脱离常规流相对于最近的 static 祖先定位不会对流内元素布局造成影响topleftrightbottom标题?h1?div 段落内容段落内容 1?p 段落内容段落内容 2?p 段落内容段落内容 3?p 段落内容段落内容 4?p?div .container background:lightblue;.box position:absolute;top:0;left:0;width:100px;height:100px;background:re

4、d;页标题段落内容段落内容 1段落内容段落内容 2段落内容段落内容 3段落内容段落内容 4https:/s.codepen.io/webzhao/debug/BvyOrE/NjMYzqnVWy标题?h1?div 段落内容段落内容 1?p 段落内容段落内容 2?p 段落内容段落内容 3?p 段落内容段落内容 4?p?div .container background:lightblue;position:relative;.box position:absolute;top:50%;left:50%;width:100px;height:100px;?margin?top:-50px;?marg

5、in left:50px;页标题段落内容段落内容 1段落内容段落内容 2段落内容段落内容 3段落内容段落内容 4https:/s.codepen.io/webzhao/debug/KbwGEy/dXAqBZPm动计算topleftrightbottomEnter your email below to get exclusive access to our best articles and tips before everybody else.?p 绝对定位内容。?divJust look at the image at the top of this article to see how

6、it will all work.Yes,you can install VLC or another piece of Windows software that easily!After you run the command,OneGet will locate the package in your configured package sources,download it to your computer,and install it all automatically.?p body margin:0;font?size:20px;.box i iblEnter your ema

7、il below to get exclusive access to ourbest articles and tips before everybody else.Just look at the image at the top of this article to seehow it will all work.Yes,you can install VLC oranother piece of Windows software that easily!Afteryou run the command,OneGet will locate the packagein your conf

8、igured package sources,download it to yourcomputer,and install it all automatically.绝对定位内容。https:/s.codepen.io/webzhao/debug/EGaOqP/bYrdyeVWVposition:fixed相对于 Viewport 定位不会随滚动发位置变化?a 导航1?a 导航2?a?nav 1?section 2?section 3?section 4?section 5?section?main返回顶部?a nav position:fixed;line?height:3;background:rgba(0,0,0,0.3);width:100%;nav a padding:0 1em;1页 导航1 导航2返回顶部https:/s.codepen.io/webzhao/debug/YdQGRY/gaMeYZDRz