定位

作者: 蛋炒饭_By | 来源:发表于2018-02-03 18:56 被阅读2次

    <pre>

    定位

    position属性

    static:默认值,没有定位

    relative:相对定位

    absolute:绝对定位

    fixed:固定定位

    标准文档流

    标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。

    一般在HTML元素分为两种:块级元素和行内元素。像div,p这些的元素属于块级元素,块级元素是从上到下一行一行的排列;默认一个块级元素会占用一行,而跟在后面的元素会另起一行排列;

    行内元素是在一行中水平布置,从左到右的排列;span,strong等属于行内元素。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    
    </head>
    <body>
    <div style="background-color:dodgerblue">我是块级元素,我单独占一行 我单独占一行 我单独占一行</div>
    <div style="background-color:yellow">我是块级元素,我一行一行的排列,我一行一行的排列,我一行一行的排列</div>
    <span style="background-color:green">我的行内元素,我水平的排列,我水平的排,我水平的排,我水平的排列,我水平的排列</span>
    <span style="background-color:gray">我是行内元素,没有那么霸道,没有那么霸道,没有那么霸道,没有那么霸道,没有那么霸道</span>
    </body>
    </html>
    </body>
    </html>
    
    

    static定位

    position:static

    元素没有定位,以标准流方式显示


    image
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>position属性</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="father">
      <div id="first">第一个盒子</div>
      <div id="second">第二个盒子</div>
      <div id="third">第三个盒子</div>
    </div>
    </body>
    </html>
    
    
    @charset "gb2312";
    /* CSS Document */
    
    div {
        width: 300px;
        margin:10px;
        padding:5px;
        font-size:12px;
        line-height:25px;
    }
    #father {
        width: 500px;
        margin: 50px auto;
        border:1px #666 solid;
        padding:10px;
    }
    #first {
        background-color:#FC9;
        border:1px #B55A00 dashed;
    }
    #second {
        background-color:#CCF;
        border:1px #0000A8 dashed;
    }
    #third {
        background-color:#C5DECC;
        border:1px #395E4F dashed;
    }
    
    

    相对定位

    relative属性值

    相对自身原来位置进行偏移

    偏移设置:top、left、right、bottom可以用left来描述盒子向右移动;

    可以用right来描述盒子向左的移动;

    可以用top来描述盒子向下的移动;

    可以用bottom来描述盒子的向上的移动;

    如果是负数就是相反的方向。

    相对定位的盒子,不脱离标准流,老家保留位置,其后的元素不能占用其原有位置。

    相对定位的主要用途是作为其内部元素绝对定位时的参照标准,有相对于我之义。

    image
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>position属性</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="father">
      <div id="first">第一个盒子</div>
      <div id="second">第二个盒子</div>
      <div id="third">第三个盒子</div>
    </div>
    </body>
    </html>
    
    
    @charset "gb2312";
    /* CSS Document */
    
    div {
        width: 300px;
        margin:10px;
        padding:5px;
        font-size:12px;
        line-height:25px;
    }
    #father {
        width: 500px;
        margin: 50px auto;
        border:1px #666 solid;
        padding:10px;
    }
    #first {
        background-color:#FC9;
        border:1px #B55A00 dashed;
        position:relative;
        top:10px;
        left:50px;
    }
    #second {
        background-color:#CCF;
        border:1px #0000A8 dashed;
    }
    #third {
        background-color:#C5DECC;
        border:1px #395E4F dashed;
    }
    
    

    绝对定位

    absolute属性值

    偏移设置: left、right、top、bottom

    使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。绝对定位的元素从标准文档流中脱离,其后的元素会占据其原有的位置。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>position属性</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="father">
      <div id="first">第一个盒子</div>
      <div id="second">第二个盒子</div>
      <div id="third">第三个盒子</div>
    </div>
    </body>
    </html>
    
    
    @charset "gb2312";
    /* CSS Document */
    
    div {
        width: 300px;
        margin:10px;
        padding:5px;
        font-size:12px;
        line-height:25px;
    }
    #father {
        width: 500px;
        margin: 50px auto;
        border:1px #666 solid;
        padding:10px;
    }
    #first {
        background-color:#FC9;
        border:1px #B55A00 dashed;
        position: absolute;
        top:10px;
        right: 10px;
    }
    #second {
        background-color:#CCF;
        border:1px #0000A8 dashed;
    }
    #third {
        background-color:#C5DECC;
        border:1px #395E4F dashed;
    }
    
    
    image
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>position属性</title>
    <link href="css/style2.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="father">
      <div id="first">第一个盒子</div>
      <div id="second">第二个盒子</div>
      <div id="third">第三个盒子</div>
    </div>
    </body>
    </html>
    
    
    @charset "gb2312";
    /* CSS Document */
    
    div {
        width: 300px;
        margin:10px;
        padding:5px;
        font-size:12px;
        line-height:25px;
    }
    #father {
        width: 500px;
        margin: 50px auto;
        border:1px #666 solid;
        padding:10px;
        position: relative;
    }
    #first {
        background-color:#FC9;
        border:1px #B55A00 dashed;
        position: absolute;
        top:10px;
        right: 10px;
    }
    #second {
        background-color:#CCF;
        border:1px #0000A8 dashed;
    }
    #third {
        background-color:#C5DECC;
        border:1px #395E4F dashed;
    }
    
    
    image

    练习 微信消息提示

    image
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #dot{
                height: 20px;
                width: 20px;
                background-color: red;
                border-radius: 50%;
                line-height: 20px;
                text-align: center;
                font-size: 14px;
                position: absolute;
                top:-10px;
                right: -10px;
            }
            #weixin{
                height: 80px;
                width: 80px;
                font-size: 20px;
                line-height: 80px;
                text-align: center;
                border: 1px solid green;
                position: relative;
            }
        </style>
    </head>
    <body>
    
    <div id="weixin">微信
        <div id="dot">2</div>
    </div>
    </body>
    </html>
    
    

    z-index属性

    调整元素定位时重叠层的上下位置

    z-index属性值:整数,默认值为0

    设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系

    z-index值大的层位于其值小的层上方

    image

    网页元素透明度

    CSS设置元素透明度

    opacity:x

    x值为0~1,值越小越透明

    opacity:0.4;

    filter:alpha(opacity=x)

    x值为0~100,值越小越透明

    filter:alpha(opacity=40);

    练习 香山红叶

    image
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>z-index属性</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="content">
      <ul>
        <li><img src="image/maple.jpg"  alt="香山红叶" /></li>
        <li class="tipText">京秋魅力&#8226;相约共赏香山红叶</li>
        <li class="tipBg"></li>
        <li>时间:11月16日 星期六 8:30</li>
        <li>地点:朝阳区西大望路珠江帝景K区正门前集合</li>
      </ul>
    </div>
    </body>
    </html>
    
    
    @charset "gb2312";
    /* CSS Document */
    ul, li {
        padding:0px;
        margin:0px;
        list-style-type:none;
    }
    #content {
        width:331px;
        overflow:hidden;
        padding:5px;
        font-size:12px;
        line-height:25px;
        border:1px #999 solid;
    }
    #content ul {
        position:relative;
    }
    .tipBg, .tipText {
        position:absolute;
        width:331px;
        height:25px;
        top:100px;
    }
    .tipText {
        color:#FFF;
        text-align:center;
        z-index:1;
    }
    .tipBg {
        background:#000;
        opacity:0.5;
        filter:alpha(opacity=50);
    }
    
    

    项目实战 有路网首页轮播图

    image
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="reset.css" rel="stylesheet">
        <style>
            .lunbotu{
                /*border: 1px solid blue;*/
                width: 750px;
                position: relative;
            }
            .lunbotu ul{
                position: absolute;
                right: 12px;
                bottom: 20px;
                /*border: 1px solid orange;*/
            }
            .lunbotu ul li
            {
                color: white;
                display: inline-block;
                width: 20px;
                height: 20px;
                background-color: gray;
                border-radius: 50%;
                text-align: center;
                line-height: 20px;
                margin: 0 5px;
            }
    
        </style>
    </head>
    <body>
    <div class="lunbotu">
        <img src="dazhuanpan.jpg">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    </body>
    </html>
    
    

    课后作业

    1.制作定位练习(相对定位)

    2.制作登录窗口( 绝对定位,相对定位)

    3.制作单项商品购买(绝对定位,相对定位,伪类)

    4.制作返回顶部

    相关文章

      网友评论

          本文标题:定位

          本文链接:https://www.haomeiwen.com/subject/dsauzxtx.html