-
绝对位置的放置，元素被包含，父元素没有设置position，本身设置margin即可查看全部
-
高度自适应布局: 设置元素为绝对定位，top：0 ；bottom：0 height为100%除以元素的单列元素的个数。绝对定位同时使用相对的top和bottom，元素就会拉伸。 如果元素里面同时还有宽度值或高度值，那么宽度或高度值会顶替掉百分百拉伸的效果，同时如果还有margin：auto的话，就会有绝对定位元素的绝对居中效果。（IE8+支持）查看全部
-
浮动float和绝对定位absolute的相同特性表现：1.父容器对子元素的包裹 2.父元素的高度塌陷。查看全部
-
容器的width/height值不固定，内部元素也可拉伸。 容器{display:inline-bloack;position:relative;} 内部{position:absolute;left:0;top:0;right:0;bottom:0;background:#fff;opacity:0.5;filter:alpha(opacity=50);}查看全部
-
只设置absolute之后（不依赖绝对定位，也不用设置left,top等），有个非常大的特性“跟随性”，当它是普通元素时，呆在什么位置，绝对定位后，还呆在什么位置。查看全部
-
1.水平居中 父元素采用『text-align:center』使div中的空格居中，子元素利用『absolute的跟随性』配合『margin负值自身宽度50%』实现居中。 html： <div class="course-loading-x"> <img src="http://img1.sycdn.imooc.com//5453077400015bba00010001.gif" class="course-loading" alt="加载中..."> </div> css： .course-loading-x { height: 0; margin-top: 20px; text-align: center; letter-spacing: -.25em; overflow: hidden; } .course-loading { position: absolute; margin-left: -26px; }查看全部
-
hot小图标： position:absolute;margin:-6px 0 0 2px; 其父级a标签： dislay:inline-block;padding:20px 35px; 而不用position:relative. 好处：1.代码减少了。2.适用性更好（如果将求课改成求好课时，这样写的css样式不用做调整，而用top,left时确要调整left）。查看全部
-
【CSS】【absolute网页整体布局(适合移动web)】 摆脱狭隘的定位：虽然与fixed,relative一样，absolute设计的初衷是定位，但不同的是absolute包含更多特性。 1.body降级，子元素升级 使升级的子div满屏 .page { position:absolute; left:0; top:0; right:0; bottom:0;} 由于绝对因为受限于父级,page想要愉快的拉伸，需要 html,body { height: 100%;} 2.各模块的头部、尾部、侧边栏各居其位 .header, .footer { position:absolute; left:0; right:0; } .header { height:48px; top:0;} .footer { height:52px; bottom:0;} .aside { position:absolute; left:0; top:0; bottom:0; width:250px; } 3.内容区域想象成body .content { position:absolute; top: 48px; bottom: 53px; 『overflow: auto;』 } (可以避免移动端使用fixed出现的问题) 4.全屏覆盖,与page平级 .overlay { position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,.5); z-index:9;} <div class="page">...</div> <div class="overlay">...</div>查看全部
-
【CSS】【absolute的top/right/bottom/left和width/height】 1.absolute元素使用top/right/bottom/left可以让元素在容器内自由定位，但是遇到属性为position:relative/absolute/fixed/sticky的<div>时，则只能到这一层为止，无法突破这一层。 2.使用top/right/bottom/left实现『拉伸』：(无固定width/height)[IE7+才支持] 当绝对定位的方向是『对立』的(如left和right)，则不是瞬间位移，而是『拉伸』效果 『position:absolute;left:0;top:0;width:50%』 等价于 『position:absolute;left:0;top:0;right:50%』但拉伸更强大 .container { display: inline-block;position: relative;} .cover { position:absolute; left:0; top:0; right:0; bottom:0;background-color:#fff; opacity:.5; filter: alpha(opacity=50); 例：没有宽度和高度声明实现的全屏自适应效果： .overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #000; opacity: .5; filter: alpha(opacity=50); } 例：高度自适应的九宫格效果 .page{position: absolute;left: 0; top: 0; right: 0; bottom: 0;} .list { float: left;height: 33.3%; width: 33.3%;position: relative;} 3.left/right和width同时存在 相互支持性：（1）容器无需固定width/height值，内部元素亦可拉伸(可实现图片上一张/下一张的遮盖层效果)（2）容器拉伸，内部元素支持百分比width/height值。 优先级：width > left/right查看全部
-
【CSS】【脱离文档流】 1.回流与重绘： Tips：动画尽量作用在绝对定位元素上 2.垂直空间的等级： 后来居上 [z-index潜在『误区』:绝对定位元素都需要z-index控制等级以确定其显示的位置] absolute是z-index无依赖的： （1）如果只有一个绝对定位元素，则会自动覆盖普通元素 （2）如果有两个绝对定位，可以控制DOM流的前后顺序达到覆盖效果 （3）如果多个绝对定位交错（非常少见），则用z-index：1控制 （4）如果非弹框类的绝对定位元素z-index>2，必定z-index冗余，需要优化查看全部
-
【CSS】【处理对齐、溢出技巧】 1.处理文字前的星号 将星号绝对定位后其不占据任何空间，方便后面的文字左对齐 <label class="regist-label"><span class="regist-star">*</span>登录密码</label> .regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; } 2.图片与文字垂直对齐 对图标设置绝对定位，并设置margin为负值 <span class="regist-remark regist-warn"> <i class="icon-warn"></i>邮箱格式不准确（演示） </span> .regist-warn { padding-left: 20px; color: #be3948; } .regist-warn > .icon-warn { position: absolute; margin-left: -20px; } 3.处理文字溢出 利用absolute绝对定位使span不占据任何空间，从而使其不换行（注<span>必须紧跟前一个标签，不能有空格） <span class="regist-remark">请输入6-16位密码，区分大小写，不能使用空格</span> .regist-remark { position: absolute; line-height: 21px; padding-top: 9px; color: #666; }查看全部
-
【CSS】【居中以及边缘对齐定位】 1.居中 采用『text-align:center』使div中的空格居中，利用『absolute的跟随性』配合『margin负值自身宽度50%』实现居中。 html： <div class="course-loading-x"> <img src="http://img1.sycdn.imooc.com//5453077400015bba00010001.gif" class="course-loading" alt="加载中..."> </div> css： .course-loading-x { height: 0; margin-top: 20px; text-align: center; letter-spacing: -.25em; overflow: hidden; } .course-loading { position: absolute; margin-left: -26px; } 2.边缘定位 采用『text-align:right』使div中的空格居右（PS：不是很明白） (fixed是直接相对于窗口定位，而直接用absolute和right，bottom是会受到父级relative限制的。所以为了避免受到父级影响，使用fixed) html： <div class="course-fixed-x"> <div class="course-fixed"> <a href="http://www.imooc.com/activity/diaocha" class="goto_top_diaocha"></a> <a href="http://www.imooc.com/user/feedback" class="goto_top_feed"></a> </div> </div> css： .course-fixed-x { height: 0; text-align: right; overflow: hidden; } .course-fixed { display: inline; position: fixed; margin-left: 20px; bottom: 100px; }查看全部
-
【CSS】【下拉框定位最佳实践】无依赖的absolute定位 1.html: <ul id="result" class="course-sidebar-result"> <li><a href="http://www.imooc.com/view/121">分享：CSS深入理解之float浮动</a></li> ... <li><a href="http://www.imooc.com/view/118">案例：CSS圆角进化论</a></li> </ul> 2.CSS: .course-sidebar-result { display: none; position: absolute; width: 260px; margin: 39px 0 0 -1px; padding-left: 0; list-style-type: none; border: 1px solid #e6e8e9; background-color: #fff; box-shadow: 0px 1px 2px #d5d7d8; font-size: 12px; } .course-sidebar-result > li { line-height: 30px; padding-left: 12px; } .course-sidebar-result > li:hover { background-color: #f9f9f9; } .course-sidebar-result a { display: block; color: #5e5e5e; text-decoration: none; } .course-sidebar-result a:hover { color: #000; }查看全部
-
【CSS】【无依赖的absolute绝对定位下的相对定位】 Tips: 1.元素进行absolute绝对定位后，有一个特性，其宽高不占据任何尺寸。 2.注释<!-- -->可以用来消除两个标签之间的空格，保证两个元素之间完美的贴合。(同时保持代码可读性) 例： .icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url(http://img1.sycdn.imooc.com//545304730001307300280011.gif); } .icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; } .icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(http://img1.sycdn.imooc.com//5453048000015d8800360036.gif); text-indent: -9em; overflow: hidden; }查看全部
-
【CSS】【无依赖的absolute】☆ 无依赖的absolute是指： 不受relative限制的absolute定位，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值。 ★定位的行为表现： 1.脱离文档流 2.去浮动：absolute与去浮动(absolute生效的时候，float是失效的) 3.位置跟随：absolute与位置跟随，原来是什么位置，绝对定位后依然是什么位置 (元素是block那么absolute之后依然是block排列,inline时absolute后依然inline排列) 注：唯独IE7不同，IE7会将所有绝对定位的元素设为display：inlien-block，解决办法是在绝对定位元素加一个无意义的父DIV标签，DIV标签要设置为：display：block； 4.可以配合margin来精确定位查看全部
举报
0/150
提交
取消