1.定位

　　（1）相对定位

　　　　如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

　　　　　　#box_relative {
  　　　　　　　　　　　　　　position: relative;
 　　　　　　　　　　　　　　 left: 30px;
　　　　　　　　　　　　　　  top: 20px;
　　　　　　　　　　　　　　}

　　（2）绝对定位

　　　　绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

　　　　　　#box_relative {
 　　　　　　　　　　　　　　 position: absolute;
 　　　　　　　　　　　　　　 left: 30px;
 　　　　　　　　　　　　　　 top: 20px;
　　　　　　　　　　　　　　}

　　例1

 <html>

     <head>

         <title>美团广告</title>

         <style type="text/css">

             body,div,p{margin:0px;padding:0px;}

             .max{width:330px;height:335px;margin:200px auto;position:relative;border:1px solid #ddd;}

             .tu1{position:absolute;left:0px;top:0px;z-index:;}

             .tu2{position:absolute;left:10px;top:10px;}

             .duanluo{position:relative;left:0px;top:15px;font-weight:bold;height:40px;line-height:23px;}

             .jiage{position:absolute;left:10px;bottom:30px;}

             .kankan{position:absolute;right:10px;bottom:30px;}

             .duanluo p a:link,.duanluo p a:visited{color:#666;text-decoration:none;}

             .duanluo p a:hover{color:red;text-decoration:underline;}

         </style>

     </head>

     <body>

         <div class="max">

             <div class="tu1">

                 <img src="data:images/tu_1.gif" />

             </div>

             <div class="tu2">

                 <img src="data:images/tu_2.jpg" />

                 <div class="duanluo">

                     <p><a href="#">【12店】领航冰品哈根达斯:冰淇淋双球,口味任选两种,节假通用</a></p>

                 </div>

             </div>

             <div class="jiage">

                 <img src="data:images/jiage.PNG" />

             </div>

             <div class="kankan">

                 <a href="#" target="blank"><img src="data:images/tu_3.jpg" /></a>

             </div>

         </div>

     </body>

 </html>

　　例2

 <html>

     <head>

         <title>美团</title>

         <style type="text/css">

             body,p,h3{margin:0px;padding:0px;font-size:14px;font-family:"宋体";}

             .box{width:340px;height:335px;border:1px solid #eee;margin:20px auto;position:relative;}

             .p1{width:310px;height:190px;padding-left:15px;padding-top:10px;}

             .p2{width:310px;height:60px;line-height:25px;padding-left:15px;padding-top:15px;font-size:20px;}

             .p2 a:link,.p2 a:visited{color:#666;text-decoration:none;}

             .p2 a:hover{color:green;text-decoration:underline;}

             .p3{font-size:30px;color:#f76120;width:230px;height:50px;padding-left:15px;float:left;font-family:arial;}

             .p4{color:#999;font-size:14px;}

             .p5{color:#999;font-size:12px;width:80px;height:50px;text-align:right;float:left;padding-top:5px;}

             .p6{color:#f76120;}

             .p7{width:60px;height:54px;position:absolute;left:-1px;top:-1px;}

         </style>

     </head>

     <body>

         <div class="box">

             <p class="p1"><a href="#" target="blank"><img src="data:images/tu_2.jpg" /></a></p>

             <h3 class="p2"><a href="#" target="blank">【12店】领航冰品哈根达斯:冰淇淋双球,口味任选两种,节假通用</a></h3>

             <p class="p3">￥20.8 <span class="p4">原价￥38</span></p>

             <p class="p5"><a href="#" target="blank"><img src="data:images/tu_3.jpg" /></a><br /><span class="p6">32</span>人已购买</p>

             <p class="p7"><img src="data:images/tu_1.gif" /></p>

         </div>

     </body>

 </html>

HTML+CSS D09 定位的更多相关文章

  1. CSS 的定位方式和含义

    CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...

  2. CSS中定位机制的想法

    对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...

  3. 转：Selenium之CSS Selector定位详解

    CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式.  百度输入框: <input name=&quo ...

  4. CSS 中定位的使用

    position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...

  5. css的定位机制

    牛腩新闻发不系统中遇到了CSS(Cascading style sheets),第一次接触,比较陌生还!因为CSS很多关于元素定位的问题,并且很多情况下元素的位置以像素精度计.一个不小心就很头疼,为此 ...

  6. css区块定位之浮动与清除属性

    float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...

  7. CSS之定位布局（position，定位布局技巧）

    css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...

  8. Selenium自动化-CSS元素定位

    接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式   大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...

  9. selenium中CSS选择器定位

    selenium元素定位,CSS选择器定位效率会高很多. CSS选择器用于选择你想要的元素的样式的模式.表格摘自“菜鸟教程”,具体用法可去查阅 选择器 示例 示例说明 CSS .class .intr ...

随机推荐

  1. delphi变量作用域

    完全摘自网络(一件飘雪),供参考: 很多初学者对delphi单元的变量和函数访问权限不理解,在此我举例说明,希望初学者看此文后能茅塞顿开. delphi单元的变量和函数访问权限问题如下两个单元描述: ...

  2. tcp协议栈

    TCP/IP是互联网的核心协议,也是大多数网络应用的核心协议.就前面一段时间面试中问到的TCP/IP问题,这里给出一个简单的小结.   TCP由RFC793.RFC1122.RFC1323.RFC20 ...

  3. 《HTML5与CSS3权威指南》读书笔记（上册）—HTML5篇

    豆瓣上的评分少且评价不太好,阅读当中发现几处刊物上的小问题,不过线下口碑貌似不错,基本上人手一本 上册五百多页,主讲H5,分为标签,本地存储,离线应用程序,新的API,获取地理位置信息标签包含表单,C ...

  4. 关于css起名

    作者:词晖链接:https://www.zhihu.com/question/19586885/answer/48933504来源:知乎著作权归作者所有,转载请联系作者获得授权. CSS书写顺序 1. ...

  5. 向量空间（Vector Spaces）

    向量空间(Vector Spaces) 向量空间又称线性空间,是线性代数的中心内容和基本概念之一.在解析几何里引入向量的概念后,是许多问题的处理变得更为简洁和清晰,在此基础上的进一步抽象化,形成了与域 ...

  6. 关于微信端不支持window.location.reload()

    今天写了一个调查问卷页面,项目经理说要表单提交之后页面刷新,之间没沟通清楚,以为整个页面重载,所以刚开始就用了window.location.reload()的方法. 但是发现,在微信直接打开之后,居 ...

  7. sql 查看语句的性能

    SET STATISTICS TIME:看cpu时间   SET STATISTICS IO:关注scan count(计数)------查询读取的表数量:logical read( 逻辑读)次数

  8. java基础值向上向下转型

    1.父类引用可以指向子类对象,子类引用不能指向父类对象. 2.向上转型:子类引用的对象转换为父类类型称为向上转型,把子类对象直接赋给父类引用叫upcasting,向上转型不用强制转型(类似于低精度赋给 ...

  9. ITest

    渗透测试入门 我很简单,请不要欺负我 网站综合渗透实验: 真的很简单: 你是会员吗: 2015中国网络安全大赛 一.代码执行: 同DZ漏洞全家桶中的"又见DZ,我能那你怎么办". ...

  10. HDU 5863 cjj's string game

    $dp$,矩阵加速. 设$dp[i][j][0]$表示:长度为$i$的两个字符串,之前还未出现过长度为$m$相同的,目前为止最后$j$个是相同的. 设$dp[i][j][1]$表示:长度为$i$的两个 ...