css position

来源：互联网发布：md5加密 java 编辑：程序博客网时间：2024/06/05 08:15
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <style>    //50%的遮罩body{    position: absolute;    left: 0;    right: 0;    width: 50%;}//距离右侧200px的全屏自适应容器.a{    position: absolute;    left: 0;    width: calc(100%-200px);}// - - - - - - - - - - - -.container{    display: block;    position: relative;}.cover{    position: absolute;    left: 0;top: 0;right: 0;bottom: 0;    background-color: #fff;    opacity: .5; filter: alpha(opacity=50);</style><span class="container">    <i class="cover"></i>    <img src="mm-l.jpg" height="381" width="512" alt=""></span><span class="container">    <i class="cover"></i>    <img src="mm-s.jpg" height="191" width="256" alt=""></span><style>    //拉伸特性的应用 上下一张图片半遮罩效果.prev, .next{    width: 50%;    *background-image: url(about:blank);    position: absolute; top: 0; bottom: 0;    outline: none;}.prev{cursor: url(pic_prev.cur),auto;left: 0;}.next{cursor: url(pic_next.cur),auto;right: 0;}</style><style>    //高度自适应布局 九宫格.page{    position: absolute;    left: 0;top: 0;right: 0;bottom: 0;}.list{    float: left;    height: 33.3%;width: 33.3%;    position: relative;}</style> <!--position:relative;1，相对自身2，无侵入提高层级上下文绝对定位：拉伸相对定位：斗争top vs bottomleft vs right最小化影响原则1，尽量避免使用relativ2，relative最小化  --><div style="position: relative;">    <img style="position: absolute;top: 0;right: 0;" src="pig_head.png" alt=""></div><div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div></div></body></html>
0 0