-
1111查看全部
-
1111查看全部
-
absolute与整体布局 1. body降级, 子元素升级 升级的子div(假设类名为page)满屏走起： .page { position: absolute; left: 0; top: 0; right: 0; bottom: 0 } 绝对定位受限于父级，因此，page要想愉快地拉伸，需要： html, body { height: 100%; } 2. 各模块-头尾、侧边栏(PC端)各居其位 header, footer { position: absolute; left: 0; right: 0; } header { height: 48px; top: 0; } footer { height: 52px; bottom: 0; } aside { width: 250px; position: absolute; left: 0; top: 0; bottom: 0 } 3. 内容区域想象成body . content { position: absolute; top: 48px; bottom: 52px; left: 250px(如果侧边栏有); overflow: auto; //这里的overflow: auto是为了让中间内容区超过宽度后可以滚动 } 此时的头部尾部以及侧边栏都是fixed效果，不跟随滚动。避免了移动端position: fixed实现的诸多问题。 4. 全屏覆盖与page平级 . overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.5); z-index: 9; } <div class= " page " ></div> <div class= " overlay "></div>查看全部
-
实现一个全屏自适应的50%黑色半透明遮罩层，你会怎么实现？ 通常技术方案： .overlay { position: absolute; width: 100%; height: 100%; left: 0; top: 0; … } 另外的技术实现： .overlay { position: absolute; left: 0; top: 0; right:0; bottom: 0; … } 绝对定位方向是对立(如：left vs right, top vs bottom)的时候，结果不是瞬间位移，而是身体的爆裂拉伸。 也就是说，很多情况下，absolute的翅膀拉伸和width/height是可以相互替代的！ position: absolute; left: 0; top: 0; width: 50%; 等同于： position: absolute; left: 0; top: 0; right: 50%; 实现一个距离右侧200像素的全屏自适应的容器层，你会怎么实现？ 使用拉伸直接： position: absolute; left: 0; right: 200px; 但是，width只能使用CSS3 calc计算： position: absolute; left: 0; width: calc(100% - 200px);查看全部
-
.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; }查看全部
-
动画动画查看全部
-
2.无依赖查看全部
-
独立的absolute可以摆脱overflow的限制查看全部
-
绝对定位元素宽高不占据任何尺寸。查看全部
-
absolute 整体布局查看全部
-
absolute整体布局前提：html, body {height:100%}查看全部
-
绝对定位的绝对居中。。可以用来实现居中的弹出框！查看全部
-
使用 absolute 来实现九宫格查看全部
-
absolute 如果设置对立位置，如top-bottom，left-right，会造成拉伸。不过要 IE7+查看全部
-
absolute 定位的一些限制。会被外层的relative，absolute，fixed，sticky元素限制查看全部
举报
0/150
提交
取消