CSS定位

原创 2016年05月31日 20:26:59

参考文章
文章中含有多个例子,试试就能明白。

例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8">  
    <title>position</title>  
    <style type="text/css">  
    <!--  
    body{  
        font-size:12px;  
        margin:0 auto;  
    }  

    div#demo{  
        position:relative;  
        border:1px solid #000;  
        margin:50px;  
        top:-50px;  
        line-height:18px;  
        overflow:hidden;  
        clear:both;  
        height:1%;  
    }  

    div#sub{  
        position:absolute;  
        right:10px;  
        top:10px;  
    }  

    div.relative{  
        position:relative;  
        left:400px;  
        top:-20px;  
    }  

    div.static,div.fixed,div.absolute,div.relative{  
        width:300px;      
    }  

    div.static{  
        background-color:#bbb;  
        position:static;  
    }  

    div.fixed{  
        background-color:#ffc0cb;  
    }  

    div.absolute{  
        background-color:#b0c4de;  
    }  

    div.relative{  
        background-color:#ffe4e1;  
    }  
    -->  
    </style>  
</head>  
<body>  
    <div id="demo">  
        <div class="static">static: 默认值。无特殊定位,对象遵循HTML定位规则 </div>  
        <div id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div>  
        <div class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </div>  
        <div class="relative">relative:对象不可层叠,但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div>  
    </div>  
</body>  
</html>  

CSS中的三种基本的定位机制(普通流、定位、浮动)

一、普通流   普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。   普通流就是html文档中...
  • chelen_jak
  • chelen_jak
  • 2014年12月16日 17:03
  • 8430

使用CSS选择器定位页面元素

之前总结了使用ID,Name,Xpath等方式来定位页面元素,其实CSS选择器也是一个非常好用的定位元素的方法,甚至比Xpath强大。在自动化里我们用CSS选择器来定位页面元素一定要牢记一个准则:唯一...
  • DefectFinder
  • DefectFinder
  • 2016年06月22日 17:38
  • 783

【WebDriver】selenium使用CSS定位页面元素

一、CSS简介 CSS 指层叠样式表 (Cascading Style Sheets) CSS 选择器参考手册:http://www.w3school.com.cn/cssref/css_selec...
  • galen2016
  • galen2016
  • 2017年05月04日 10:04
  • 3353

CSS实现相对浏览器窗口定位

Web Developer / Designer 经常需要将一个元素“固定”在页面的某个位置。例如弹出窗口、漂浮广告位等……本文将详细介绍简单CSS实现元素相对于浏览器窗口进行定位的方法。 po...
  • huangdehui1989
  • huangdehui1989
  • 2014年03月08日 00:30
  • 3019

CSS三大定位原理&Z-index解析

一、理解定位(static是默认的)原始图—不加定位1.absolute(绝对定位) 1.脱离标准流,在页面中不占位置(浮起来) 2.如果没有父元素,则相对于body定位;如果有父元素,但父...
  • w_linux
  • w_linux
  • 2017年03月29日 22:18
  • 904

CSS中的定位——position属性

CSS定位指的是 改变元素在页面中的位置。 CSS定位机制: 普通流:元素按照其在HTML中的位置顺序决定排布的过程(也就是我不对元素进行定位的默认排布) 浮动 绝对布局 CSS定位包含的属性有: ...
  • qq_15096707
  • qq_15096707
  • 2016年01月07日 15:19
  • 1177

CSS定位DIV绝对底部

CSS定位DIV绝对底部   网页制作Webjx文章简介:CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案。在CSS的世界里,似乎没有完美这种说法。所以,现在介绍的C...
  • zzq19860626
  • zzq19860626
  • 2013年08月23日 13:54
  • 6489

CSS基础之浮动定位、显示、光标、定位

1、浮动定位   1、定位     简单点说,定位就是改变元素在页面上的默认位置   2、定位的分类     按照定位的效果,可以分成以下几类:     1、普通流定位(默认方式)    ...
  • Andone_hsx
  • Andone_hsx
  • 2017年01月09日 22:52
  • 511

CSS定位(positive)属性的原理

static默认值,元素出现在正常的流中。默认值,所以没什么好说的。 relative通过设置水平距离(left/right)或垂直距离(top/bottom),让这个元素相对于它的起点移动。元素仍...
  • hyr_ii
  • hyr_ii
  • 2016年12月20日 20:59
  • 530

看完这个,css中position的绝对定位相对定位就懂了

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对...
  • cyyax
  • cyyax
  • 2016年01月29日 14:32
  • 15529
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS定位
举报原因:
原因补充:

(最多只允许输入30个字)