css10定位属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>定位属性</title>
    <style type="text/css">
        /*
           position
          01.relative:相对定位,相对于自身原来的位置
          02.absolute:绝对定位,相当于父级
          03.fixed : 固定定位    相对于浏览器
          04.static :默认值
        */
    img{
        position: fixed;  /*固定定位*/
        left: 50px;
        top: 20px;
    }
   #a{
       position: absolute; /*绝对定位*/
       top: 20px;
       height: 50px;
       width: 50px;
       background-color: blue;
   }
   #b{
       height: 50px;
       width: 50px;
       background-color: deeppink;
   }
   #c{
       position: relative; /*相对定位*/
       height: 50px;
       width: 50px;
       background-color: green;
   }
    </style>
</head>
<body>

    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
  <img src="image/cat.jpg"  width="50px" height="50px">
</body>
</html>

运行效果图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style  type="text/css">
         div{
             margin: 10px;
             padding: 5px;
             font-size: 12px;
             line-height: 25px;
         }
/*
position属性:
  static:默认值,没有定位!
  relative:相对定位! 相对于自身原来的位置!也就是现在的位置,按照定位能还原到原本的位置!
            设置相对定位的盒子,原本的位置会被留下来!
*/
        #father{
            border: 1px solid  red;
        }
        #first{
            border: 1px dashed  orange;
            background-color:orange ;
            position: relative;
            /*top: 20px;
            left: 20px;*/
        }
        #second{
            border: 1px dashed  pink;
            background-color:pink ;
            position: relative;
            float: right;
        }
        #third{
            border: 1px dashed  yellowgreen;
            background-color:yellowgreen ;
            position: relative;
        }
    </style>
</head>
<body>
  <div id="father">
       <div id="first">第1个盒子</div>
       <div id="second">第2个盒子</div>
       <div id="third">第3个盒子</div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>花样连接</title>
    <style type="text/css">
         div{
             width: 300px;
             height: 300px;
             border: 1px solid red;
             padding: 10px;
         }
        a{
            display: block;
            height: 80px;
            width: 80px;
            background-color:pink ;
            text-decoration: none;
            text-align: center;
            line-height: 80px;
        }
        #a2,#a4{
            position: relative;
            left:180px;
            top: -80px;
        }
        #a5{
            position: relative;
            left:90px ;
            top: -240px;
        }
        a:hover{
            background: blue;
            text-decoration: underline;
            color: deeppink;
        }

    </style>
</head>
<body>
<div id="box">
    <a href="#" id="a1">链接1</a>
    <a href="#" id="a2">链接2</a>
    <a href="#" id="a3">链接3</a>
    <a href="#" id="a4">链接4</a>
    <a href="#" id="a5">链接5</a>
</div>
</body>
</html>
/*
position属性:
  static:默认值,没有定位!
  relative:相对定位! 相对于自身原来的位置!也就是现在的位置,按照定位能还原到原本的位置!
            设置相对定位的盒子,原本的位置会被留下来!
  absolute:绝对定位:相对于离当前元素最近的一个已经定位的父级元素为基准!
            如果父级元素没有设置定位属性,则以浏览器为准!
            元素的位置发生变化之后,脱离了标准的文档流!它原来的位置不会保留!
  fixed: 固定定位! 相对于浏览器的!
  z-index: 设置层叠! 数值越大,离我们越近!  对于没有设置position属性的元素无效!
*/
时间: 06-27

css10定位属性的相关文章

定位属性left,right,top,bottom

1.官方解释 left: 设置定位元素左外边距边界与其包含块左边界之间的偏移.(该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移,下面也差不多..) right: 设置定位元素右外边距边界与其包含块右边界之间的偏移. top: 设置定位元素的上外边距边界与其包含块上边界之间的偏移. bottom: 设置定位元素下外边距边界与其包含块下边界之间的偏移. 2.个人理解 left等定位属性,要使用时,它得(dei)是已定位的元素.(absolute,relative,fixed) eg:im

深入理解css中的定位属性:position

深入理解css中的定位属性:position 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute. 第一部分:static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响. 如html代码如下: <div class=&qu

CSS定位属性之间的相互作用

0. 目录 目录 引言 正文 1 DISPLAY NONE 2 POSITION ABSOLUTE OR FIXED Float DISPLAY 3 FLOAT LEFT OR RIGHT DISPLAY 4 POSITION STATIC 偏移值 声明 1. 引言 原文:bitsofcode的HOW POSITIONING CSS PROPERTIES INTERACT 译者:爱前端,乐分享的FedFun,前端痴王海庆的博客. 译言:来看下CSS标布局情况下,定位相关属性之间的相互作用,意译为

HTML的定位属性

position    用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定) top层距离顶点纵坐标的距离 left层距离顶点横坐标的距离 width层的宽度,可以用一个长度或“auto”值来指定其宽度,不允许使用负值 height层的高度,可以用一个长度或“auto”值来指定高度,不允许使用负值 z-index决定层的先后顺序和覆盖关系,值高的元素会覆盖比较低的元素 display是一个显示属性,设定block值是以块显示,在元素

Css中Position定位属性与层级关系

今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css中Position定位属性与层级关系</title> 6 <style type="text/css"> 7 #W{ 8

css中的定位属性position

同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来实现的一些特效经常会用到定位属性,比如鼠标滑过显示被隐藏的盒子, banner的切换,还有之前写的jquery实现京东商品分类导航的类似这样的布局也是要结合定位属性来实现,但是上一次着重只写了jquery. 那么这次我想将定位属性的运用拿来说一下. 定位属性position常用的取值:relative/absolute/fixed;一般配

CSS(八):定位属性

一.position属性 1.relative(相对定位) 相对它原来的位置,通过指定偏移,到达新的位置. 扔在标准流中,它对父级盒子和相邻的盒子都没有任何影响. 看下面的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev

利用维度知识理解CSS中的定位属性

我们知道HTML中有常规流文本和非常规流,当一个元素的position属性为为相对定位.绝对定位或固定定位时,这个元素就会脱离的常规流文本,这个时候就可以利用left等属性来进行位置的设定. 要理解这个过程的原理其实很简单,我们可以利用维度思维来理解. 我们都知道二维维度是一个平面维度,三维维度就是我们现在所处的现实世界,那么我们就可以把一个页面看作是一个二维的平面维度,这个维度里的内容是有排列顺序的,比如你在写一篇文章,突然发现某一句话需要放到它前面那一段话的前面,那么你就需要把这个句子删掉,

关于css的定位属性

关于css的定位属性 一.什么是定位 css中的定位属性为position,它规定元素的定位类型,选择不同的参照物和定位方式.分为五种:默认 绝对 相对 固定 黏性 二.属性值逐一描述 1.默认属性值 position:static; . 不特别设置的情况下,每个元素默认的属性值 . 不会识别left right top bottom指定坐标 .不能通过z-index进行层次分级 2.绝对定位 position:absolute; . 通过 left right top bottom 指定坐标,