html:定位层
　　特点:
　　　　>>完全脱离默认文档流，独立于立体层面的Z轴之上。
　　　　　　>>和float浮动一样都脱离了默认文档流，但float元素与默认文档流之间会相互产生影响，而定位层元素则完全独立，互不干扰
　　　　>>让元素inline-block化
　　　　　　>>例如一个div标签默认宽度是100%显示的，但是一旦变成absolute绝对定位，则默认独占一行的宽度就会变成自适应内部元素的宽度
　　　　　　>> 通常当我们将html元素设置成了定位层之后，就需要指定其宽度和高度。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>绝对定位和相对定位</title>

     <style>

         .position-div{

             background-color:#ff0;

             position:absolute;

         }

         .float-div{

             float: left;

             background-color: #8FE083;

         }

     </style>

 </head>

 <body>

 <div class="position-div">绝对定位div</div>

 <br><br><br><br><br><br>

     <div class="float-div">浮动div</div>

 </body>

 </html>

绝对定位和相对定位的区别:
　　　　>> absolute元素完全脱离默认文档流，不保留占位空间
　　　　>> relative元素完全脱离默认文档流，但仍然保留在默认文档流中的占位空间。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>绝对定位和相对定位</title>

     <style>

         .absolute{

             background-color:#ff0;

             position:absolute;

             width:50px;

             height:50px;

         }

         .relative{

             background-color:#ff0;

             position:relative;

             width:50px;

             height:50px;

         }

     </style>

 </head>

 <body>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <div class="absolute">绝对定位</div>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <hr color="red"/>

 <hr color="red"/>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <div class="relative">相对定位</div>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 </body>

 </html>

相对层+绝对层的应用技巧:
　　>> 1、在页面中给某个元素(父级对象)设置相对定位，使其成为所包含的子级对象的定位参照物。
　　　　　　通常不设置其具体定位位置，保留其占据默认文档流空间的特性，不妨碍整体布局。
　　>> 2、相对层对象的内部，添加子级对象设置绝对定位，然后用相关定位属性控制其位置，以实现重叠或位移效果。

实际应用方案:
　　>>将relative相对层(父级)和absolute绝对层(子级)结合一起使用。实现某些栏目或板块中，内容元素的重叠或位移效果。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>定位层的应用演示</title>

     <style>

         *{margin:0;padding:0;}

         ul li{list-style:none;}

         .vedio-list{

             margin-top:200px;

         }

          .vedio-list li{

              width:270px;

              position:relative;

              float:left;

              margin-left:10px;

          }

             .vedio-list li img{width:270px;}

             .vedio-list li p{font-size:14px;line-height:20px;}

             .vedio-list li i{

                 background: url(./tag.png);

                 width:28px;

                 height:18px;

                 position:absolute;

                 top:5px;

                 right:5px;

             }

         .vedio-list li b{

                 font-size:12px;

                 color:#fff;

                 background-color:#000;

                 padding:2px 4px;

                 position:absolute;

                 left:5px;

                 top:120px;

         }

     </style>

 </head>

 <body>

     <ul class="vedio-list">

         <li>

             <img src="./宫.jpg" alt="">

             <p>宫 泰国版</p>

             <i></i>

             <b>1080p</b>

         </li>

         <li>

             <img src="./来自海洋的你.jpg" alt="">

             <p>来自海洋的你</p>

             <i></i>

             <b>1080p</b>

         </li>

         <li>

             <img src="./扶摇.jpg" alt="">

             <p>扶摇</p>

             <i></i>

             <b>1080p</b>

         </li>

         <li>

             <img src="./壮志高飞.jpg" alt="">

             <p>壮志高飞</p>

             <i></i>

             <b>1080p</b>

         </li>

          <li>

             <img src="./重返二十岁.jpg" alt="">

             <p>重返二十岁</p>

             <i></i>

             <b>1080p</b>

         </li>

     </ul>

 </body>

 </html>

【CSS】绝对定位和相对定位的更多相关文章

  1. css绝对定位、相对定位和文档流的那些事

    前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...

  2. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

  3. CSS 绝对定位和相对定位

    CSS定位属性:一个定位属性,需配合四个定位坐标,实现定位 固定定位fixed 说明: 1.固定定位是相对于"浏览器窗口" 2.如果只设置了定位属性,未指定定位坐标时,元素将停留在 ...

  4. CSS 绝对定位与相对定位的区别

    设置为绝对定位的元素框从文档流完全删除, 并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块. 元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样. 元素定位后生成一 ...

  5. HTML 学习笔记 CSS样式（相对定位 绝对定位）

    CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...

  6. [Web 前端] CSS 盒子模型，绝对定位和相对定位

    cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...

  7. Css的向左浮动、先右浮动、绝对定位、相对定位的简单使用

    1.div层的浮动 1)div向左浮动.向右浮动 <!doctype html> <html> <head> <meta charset="utf- ...

  8. 辛星和你彻底搞清CSS中的相对定位和绝对定位

    前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...

  9. css中的绝对定位和相对定位（详解，总结）

    css中的绝对定位和相对定位(详解,总结) 总结: 设置绝对定位或者相对定位后都从文档中浮起来了,区别是相对定位还占着原来的位置,绝对定位不占着原来的位置,可以种z-index来改变元素的浮动的堆叠次 ...

  10. 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

    1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  h ...

随机推荐

  1. Java实验报告一：Java开发环境的熟悉

    实验要求: 1. 使用JDK编译.运行简单的Java程序 2.使用Eclipse 编辑.编译.运行.调试Java程序 实验内容 (一)   命令行下Java程序开发 (二)Eclipse下Java程序 ...

  2. 《Linux内核设计与实现》课本第四章学习总结

    进程调度 4.1 多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统. 多任务系统分为两种: 抢占式多任务:Linux提供了抢占式的多任务模式,由调度程序来决定什么时候停止一个进程的运行 ...

  3. Linux课题实践五——字符集总结与分析

    Linux课题实践三——字符集总结与分析 20135318  刘浩晨 字符是各种文字和符号的总称,包括各国家文字.标点符号.图形符号.数字等.字符集是多个字符的集合,字符集种类较多,每个字符集包含的字 ...

  4. 冲刺Two之站立会议9

    今天我们团队主要针对软件的功能进行了改进.因为它目前可以实现视频通话,语音聊天,文件传输和文字聊天的通信功能,我们想要在它的基础上实现临时局域群聊和群聊视频的功能,目前还没有完全实现.

  5. HTTP基础与Android之（安卓与服务器通信）——使用HttpClient和HttpURLConnection

    查看原文:http://blog.csdn.net/sinat_29912455/article/details/51122286 1客户端连接服务器实现内部的原理 GET方式和POST方式的差别 H ...

  6. beta 答辩总结

    评审表 编号 团队名称 项目名称 格式 内容 PPT 演讲 答辩 总分/100 1 天机组 指尖加密 14 13 13 13 13 66 2 PMS Your eyes 14 14 17 14 15 ...

  7. MySQLi面向对象实践--select

    对于update.insert.delete请参考http://www.cnblogs.com/-beyond/p/8457580.html 执行select,如果SQL语句执行成功,那么返回的是一个 ...

  8. Resolve Missing artifact Issue in maven

    https://jingyan.baidu.com/article/d621e8da0a5b192864913f79.html

  9. SQLSERVER case when 的学习

    sqlserver 查询时的CASE WHEN学习记录 ) as '任务数', RPATask_State as id, case RPATask_State when then '已接收' when ...

  10. python之文件目录操作

    代码示例: # 改变当前目录操作 import os cur = os.curdir print("1.当前目录相对路径:", cur) par = os.pardir print ...