css之position

 

position:规定元素的定位类型

主要有以下三种类型：

　　fixed:生成绝对定位元素，相对于浏览器窗口而言的，即不管浏览器窗口大小如何变化，元素始终位于浏览器的固定位置。

　　　　　　不管是否有父div，它的位置始终是浏览器的绝对位置

　　元素位置可以通过：top,bottom,left,right来定位

 

css代码

div{
    height: 500px;
    width: 500px;
    background-color: #303a40;
}
p{
    position: fixed;
    top:30px;
    right: 30px;
}

　　html代码

<head>
    <meta charset="UTF-8">
    <title>CSS测试</title>
    <link rel="stylesheet" type="text/css" href="ctest.css">
</head>
<body>
<body>
   <div >
       <p>绝对位置</p>
   </div>
</body>
</body>

　　效果图：

 

 

　　absolute:生成绝对定位元素，相对于static以外的第一个父元素，

　　　　元素位置可以通过：top,bottom,left,right来定位

css代码

div{
    height: 500px;
    width: 500px;
    background-color: #303a40;
}
p{
    position: absolute;
    top:30px;
    right: 30px;
}

　　html代码同上

 

效果图：

 

　　relative:生成相对定位元素，其是相对于其正常位置而言的

　　　　属性：

　　　　　　left 30px:相对于正常位置左侧填充30px;

　　　　　　top 30px:相对于正常位置上侧填充30px;

 

css代码：

div{
    height: 500px;
    width: 500px;
    background-color: #303a40;
}
p{
    position: relative;
    left:600px;
    top:100px;
}

　　html代码

<head>
    <meta charset="UTF-8">
    <title>CSS测试</title>
    <link rel="stylesheet" type="text/css" href="ctest.css">
</head>
<body>
<body>
   <div >
       <p>相对位置</p>
   </div>
    <div style="height: 1000px;background-color: #656565"></div>
</body>
</body>

　　效果图：

 

 

现象：

　　当absolute遇见了relativ会怎么样？

css代码：

div{
    height: 500px;
    width: 500px;
    background-color: #303a40;
    position: relative;
    left:100px;
}
p{
    position: absolute;
    right: 20px;
    top:20px;
}

　　html代码

<head>
    <meta charset="UTF-8">
    <title>CSS测试</title>
    <link rel="stylesheet" type="text/css" href="ctest.css">
</head>
<body>
<body>
   <div >
       <p>绝对位置</p>
   </div>
    <div style="height: 1000px;background-color: #656565"></div>
</body>
</body>

　　效果图

 

posted on 2016-12-01 17:15  孔扎根  阅读(183)  评论(0)    收藏  举报

导航