css定位 订阅
在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。 展开全文
在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。
信息
领    域
计算机
类    型
系统
中文名
CSS定位
定位原理
可以位移的元素
CSS定位CSS定位的定义:
relative 不脱离文档流,参考自身静态位置通过 top(上),bottom(下),left(左),right(右) 定位,并且可以通过z-index进行层次分级。absolute 脱离文档流,通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。fixed 固定定位,这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。CSS中定位的层叠分级:z-index: auto | namber;auto 遵从其父对象的定位namber 无单位的整数值。可为负数
收起全文
精华内容
下载资源
问答
  • CSS定位

    千次阅读 多人点赞 2020-11-04 19:51:32
    CSS定位定位:标准文档流static定位相对定位绝对定位固定定位z-index属性网页元素透明度圆角边框 定位: position属性 说明 static 默认值,没有定位 relative 相对定位 absolute 绝对定位 fixed 固定...

    定位:

    position属性 说明
    static 默认值,没有定位
    relative 相对定位
    absolute 绝对定位
    fixed 固定定位

    标准文档流

    标准文档流是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。

    一般在HTML元素分为两种:块级元素行内元素
    块级元素:

    块级元素是从上到下一行一行的排列,默认一个块级元素会占用一行,而跟在后面的元素会另起一行排列。
    像div,p这些的元素属于块级元素。

    行内元素:

    行内元素是在一行中水平布置,从左到右的排列 。span,strong等属于行内元素

    static定位

    position:static
    

    元素没有定位,以标准流方式显示
    样例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    	<title>position属性</title>
    	<style>
    		div {
    		    width: 300px;
    		    margin:10px;
    		    padding:5px;
    		    font-size:12px;
    		    line-height:25px;
    		}
    		#father {
    		    width: 500px;
    		    margin: 50px auto;
    		    border:1px #666 solid;
    		    padding:10px;
    		}
    		#first {
    		    background-color:#FC9;
    		    border:1px #B55A00 dashed;
    		}
    		#second {
    		    background-color:#CCF;
    		    border:1px #0000A8 dashed;
    		}
    		#third {
    		    background-color:#C5DECC;
    		    border:1px #395E4F dashed;
    		}
    	</style>
    	</head>
    	<body>
    	<div id="father">
    	  <div id="first">第一个盒子</div>
    	  <div id="second">第二个盒子</div>
    	  <div id="third">第三个盒子</div>
    	</div>
    	</body>
    	</html>
    
    

    效果截图:
    在这里插入图片描述

    相对定位

    relative属性值

    相对定位就是相对自身原来位置进行偏移

    偏移设置:top、left、right、bottom。

    可以用left来描述盒子向右移动
    可以用right来描述盒子向左的移动
    可以用top来描述盒子向下的移动
    可以用bottom来描述 盒子的向上的移动
    如果是负数就是相反的方向

    例如:left:10px 就是距离左边10px(也就是往右移动10px)

    相对定位的盒子,不脱离标准流,老家保留位置,其后的元素不能占用其原有位置。
    相对定位的主要用途是作为其内部元素绝对定位时的参照标准,相对于“我”而言。

    样例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    	<title>relative属性</title>
    	<style>
    		div {
    		    width: 300px;
    		    margin:10px;
    		    padding:5px;
    		    font-size:12px;
    		    line-height:25px;
    		}
    		#father {
    		    width: 500px;
    		    margin: 50px auto;
    		    border:1px #666 solid;
    		    padding:10px;
    		}
    		#first {
    		    background-color:#FC9;
    		    border:1px #B55A00 dashed;
    		    position:relative;
    		    top:10px;
    		    left:150px;
    		}
    		#second {
    		    background-color:#CCF;
    		    border:1px #0000A8 dashed;
    		}
    		#third {
    		    background-color:#C5DECC;
    		    border:1px #395E4F dashed;
    		}
    	</style>
    	</head>
    	<body>
    	<div id="father">
    	  <div id="first">第一个盒子</div>
    	  <div id="second">第二个盒子</div>
    	  <div id="third">第三个盒子</div>
    	</div>
    	</body>
    	</html>
    

    效果截图:
    在这里插入图片描述

    绝对定位

    absolute属性值
    偏移设置: left、right、top、bottom。

    使用了绝对定位的元素以它最近的一个“已经定位”的“==祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。绝对定位的元素从标准文档流中脱离,其后的元素会占据其原有的位置。

    样例代码1:

    <!DOCTYPE html>
    <html>
    	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    	<title>absolute属性</title>
    	<style>
    		div {
    		    width: 300px;
    		    margin:10px;
    		    padding:5px;
    		    font-size:12px;
    		    line-height:25px;
    		}
    		#father {
    		    width: 500px;
    		    margin: 50px auto;
    		    border:1px #666 solid;
    		    padding:10px;
    		}
    		#first {
    		    background-color:#FC9;
    		    border:1px #B55A00 dashed;
    		    position: absolute;
    		    top:10px;
    		    right: 10px;
    		}
    		#second {
    		    background-color:#CCF;
    		    border:1px #0000A8 dashed;
    		}
    		#third {
    		    background-color:#C5DECC;
    		    border:1px #395E4F dashed;
    		}
    	</style>
    	</head>
    	<body>
    	<div id="father">
    	  <div id="first">第一个盒子</div>
    	  <div id="second">第二个盒子</div>
    	  <div id="third">第三个盒子</div>
    	</div>
    	</body>
    	</html>
    

    效果截图1:
    在这里插入图片描述
    样例代码2:

    <!DOCTYPE html>
    <html>
    	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    	<title>absolute属性</title>
    	<style>
    		div {
    		    width: 300px;
    		    margin:10px;
    		    padding:5px;
    		    font-size:12px;
    		    line-height:25px;
    		}
    		#father {
    		    width: 500px;
    		    margin: 50px auto;
    		    border:1px #666 solid;
    		    padding:10px;
    		    position: relative;
    		}
    		#first {
    		    background-color:#FC9;
    		    border:1px #B55A00 dashed;
    		    position: absolute;
    		    top:10px;
    		    right: 10px;
    		}
    		#second {
    		    background-color:#CCF;
    		    border:1px #0000A8 dashed;
    		}
    		#third {
    		    background-color:#C5DECC;
    		    border:1px #395E4F dashed;
    		}
    
    	</style>
    	</head>
    	<body>
    	<div id="father">
    	  <div id="first">第一个盒子</div>
    	  <div id="second">第二个盒子</div>
    	  <div id="third">第三个盒子</div>
    	</div>
    	</body>
    	</html>
    
    

    效果截图2:
    在这里插入图片描述

    固定定位

    固定定位,就是始终让一个元素固定在一个位置,不管怎么滚动页面,那个固定的元素也不会改变位置。

    position: fixed;
    

    fixed属性值
    偏移设置: left、right、top、bottom。

    样例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style>
    			.d1 {
    				position: fixed;
    				width: 100px;
    				height: 100px;
    				left: 50%;
    				background-color: #666666;
    			}
    		</style>
    		<title></title>
    	</head>
    	<body>
    		<div class="d1">这是个固定在中间位置的div块</div>
    		<p>Keafmd</p>
    		<p>这是一句话1</p>
    		<p>这是一句话2</p>
    		<p>这是一句话3</p>
    		<p>这是一句话4</p>
    		<p>这是一句话5</p>
    		<p>这是一句话6</p>
    		<p>这是一句话7</p>
    		<p>这是一句话8</p>
    		<p>这是一句话9</p>
    		<p>这是一句话10</p>
    		<p>这是一句话11</p>
    		<p>这是一句话12</p>
    		<p>这是一句话13</p>
    		<p>这是一句话14</p>
    		<p>这是一句话15</p>
    		<p>这是一句话16</p>
    		<p>这是一句话17</p>
    		<p>这是一句话18</p>
    		<p>这是一句话19</p>
    		<p>这是一句话20</p>
    
    	</body>
    </html>
    
    

    效果截图(动图):

    在这里插入图片描述

    z-index属性

    调整元素定位时重叠层的上下位置

    z-index属性值:整数,默认值为0 设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系。
    z-index值大的层位于其值小的层上方。

    在这里插入图片描述

    网页元素透明度

    CSS设置元素透明度 opacity:x
    x值为0~1,值越小越透明

    例:opacity:0.4;

    filter:alpha(opacity=x)
    x值为0~100,值越小越透明

    例:filter:alpha(opacity=40);

    样例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    		    .container{
    		        position: relative;
    		    }
    		    .container div{
    		        position: absolute;
    		    }
    		</style>
    		<title></title>
    	</head>
    	<body>
    		<div class="container">
    		    <div style="background-color: #008000;z-index: 100;opacity: 0.4;">牛哄哄的柯南</div>
    		    <div style="background-color: #0000ff;left: 10px;top: 10px;z-index: 50">Keafmd</div>
    		    <div style="background-color: #ffff00;left: 20px;top: 20px;z-index: 10">一起加油</div>
    		</div>
    	</body>
    </html>
    
    

    效果截图:
    在这里插入图片描述

    圆角边框

    通过设置 border-radius 属性(边框圆半径)
    ↓这样设置就可以让正方形的div框成为圆。

    border-radius:50% ;

    样例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			.d1{
    				height: 100px; 
    				width: 100px;
    				background-color: #6495ED;
    				line-height:100px ;
    				text-align: center;
    				border-radius:50% ;
    			}
    		</style>
    		<title></title>
    	</head>
    	<body>
    		  <div class="d1">Keafmd</div>
    	</body>
    </html>
    
    

    效果截图:
    在这里插入图片描述
    写作不易,读完如果对你有帮助,感谢点赞支持!
    如果你是电脑端,看见右下角的“一键三连”了吗,没错点它[哈哈]

    在这里插入图片描述

    加油!

    共同努力!

    Keafmd

    展开全文
  • CSS 定位

    2019-11-10 19:44:01
    在CSS中,通过CSS定位(CSS position)可以实现网页元素的精确定位。CSS定位和CSS浮动类似,也是控制网页布局的操作,CSS定位更加灵活,可以针对更多个性化的布局方案来使用。在网页布局实战中,灵活使用这两种布局...
    	在CSS中,通过CSS定位(CSS position)可以实现网页元素的精确定位。CSS定位和CSS浮动类似,也是控制网页布局的操作,CSS定位更加灵活,可以针对更多个性化的布局方案来使用。在网页布局实战中,灵活使用这两种布局方式,能够创建多种高级而精确的布局。
    

    定位属性
    制作网页时,Css可以使用定位属性将一个元素精确地放在页面上指定位置。元素的定位属性由定位模式和位置属性两部分构成。
    1.定位模式
    在CSS中,position属性用来定义元素的定位模式,其常用的属性值有四个,分别表示不同含义。
    static 静态定位(默认定位方式)
    relative 相对定位,相对于其原文档流的位置进行定位
    absolute 绝对定位,相对于其上一个已经定位的父元素进行定位fixed 固定定位,相对于浏览器窗口进行定位。静态定位就是默认的方式,当psition属性值为stati 时,可以将元素定位于静态位置。静态位置就是各个元素在HTML文档流中默认的位置。
    在默认状态下任何元素都会以静态定位来确定位置。因此,当元素未设置postion属性时,会遵循默认值显示为静态位置。
    2.位置属性
    定位模式仅仅定义了元素的定位方式,而并不能确定元素的具体位置。在CSS中,位置属性用来精确定义定位元素的位置,其取值为不同单位的数值或百分比,定位属性包括top、bottom、 left 和right。

    边偏移属性 含义
    顶部偏移量 top
    底部偏移量 bottom
    左侧偏移量 left
    右侧偏移 right

    相对定位
    相对定位是元素相对于它在原文档流中的位置来进行定位,position属性的取值为relative。接下来通过案例来演示直接在box2上添加position属性值。
    在这里插入图片描述
    在这里插入图片描述
    给元素只添加relative值,对元素本身并没有任何影响,只是设置其相对定位,因此还需要通过定位属性来改变元素的位置,但它在文档流中的位置任然保留。

    在这里插入图片描述
    在这里插入图片描述
    元素在设置left值50px和top值50px条件下,可以移动到指定的位置。相对定位是相对于元素本身的左,上角进行偏移操作的。相对定位的偏移并没有影响到其他元素的位置。
    需要注意一点,定位模式和位置属性是配合在一起使用的, 如果只定义一种,则对元素不起任何作用。

    绝对定位
    绝对定位是元素相对于已经定位(相对、绝对或固定定位)的父元素进行定位。若所有父元素都没有定位,则依据浏览器窗口左上角进行定位。当psition属性值为asolue时,可以将元素的定位模式设置为绝对定位。接下来通过案例来演示直接将b2元素的position属性值设置为absolute。

    在这里插入图片描述
    在这里插入图片描述
    box2叠加到box3的上面,这说明绝对定位会脱离文档流。其中中box2没有父元素,因此其定位将根据浏览器窗口左上角进行偏移,接下来将介绍绝对定位的另外两个特点。

    (1)与浮动类似,块元素添加绝对定位后,默认宽与内容的宽相同。

    在这里插入图片描述
    在这里插入图片描述
    (2)嵌套结构中的绝对定位。当父元素或祖先元素中有相对定位或绝对定位时,子元素的绝对定位将相对于父元素或祖先元素进行定位。当父元素或祖先元素都没有定位属性时,子元素将相对于浏览器窗口进行偏移。

    在这里插入图片描述
    在这里插入图片描述
    固定定位
    固定定位通过将position属性值设置为fixed来实现。固定定位与绝对定位类似,也是脱离文档流。二者的不同点是当元素的position属性设置为fixed时,元素将被固定即不会随着滚动条的拖动而改变位置。在视野中,固定定位的元素的位置不会改变。接下来通过案例来演示。

    在这里插入图片描述
    在这里插入图片描述

    定位的层级
    当多个元素添加定位操作时,可能会出现叠加情况,即在默认的情况下输出的HTML结构层级就会越高。接下来通过案例来演示。

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • css定位

    2019-11-12 14:57:06
    在css中,通过css定位,可以实现网页元素的精准定位。css定位和css浮动类似,因为是控制网页布局的操作,css定会为更加灵活,可以针对更多个性化的布局方案来使用。在网页布局实战中,灵活使用这两种布局方式,能够...

    在css中,通过css定位,可以实现网页元素的精准定位。css定位和css浮动类似,因为是控制网页布局的操作,css定会为更加灵活,可以针对更多个性化的布局方案来使用。在网页布局实战中,灵活使用这两种布局方式,能够创建多种高级而精准的布局。
    定位属性
    制作网页时,css可以定位属性将一个元素精准的放在页面上指定位置。元素的定位属性由定位模式和位置属性两部分构成。
    定位模式
    在css中,position属性用来定义元素的定位模式,其常用的属性值有四个。分别表示不同的定位模式。
    position属性的常用值
    static 静态定位
    relative 相对定位,相对于其原文档流的位置进行定位
    absolute 绝对定位,相对于上一个已经定位的父元素进行定位。
    fixed 固定定位,相对于浏览器窗口进行定位。
    静态定位就是默认的方式,当position属性设置为static时,可以将元素定位与静态位置,静态位置就是各个元素在HTML文档流中默认的位置。
    在默认状态下任何元素都会以静态定位来确定位置,因此,当元素未设置position属性时,会遵循默认值显示为静态位置。
    位置属性
    定位模式仅仅定义了元素的定位模式而并不明确元素的具体位置。在css中,位置属性用来精准定义定位元素的位置,其取值为不同单位的数值或百分比,定位属性包括top,bottomm,left,right
    top 顶部偏移量
    bottom 底部偏移量
    left 左侧偏移量
    right 右侧偏移量
    相对定位
    元素相对于它在原文档流中的位置进行定位,position属性的取值为relative。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>相对定位</title>
        <style>
            #qwe{
                width: 50px;
                height: 50px;
                background:red;
            }
            #asd{
                width: 50px;
                height: 50px;
                background: green;
                position: relative;
            }
            #zxc{
                width: 50px;
                height: 50px;
                background: cyan;
            }
        </style>
    </head>
    <body>
        <div id="qwe"></div>
        <div id="asd"></div>
        <div id="zxc"></div>
    </body>
    </html>
    

    给元素只添加relative值,对元素本身并没有任何影响,只是设置其相对定位,因此还需要通过定位来改变元素的位置,但他在文档流中的位置仍然保留。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #qwe{
                width: 50px;
                height: 50px;
                background: cyan;
            }
            #asd{width: 50px;
            height: 50px;
            background: darkblue;
            position: relative;
            left: 50px;
            top: 50px;
            }
            #zxc{
                width: 50px;
                height: 50px;
                background: darkorange;
            }
        </style>
    </head>
    <body>
        <div id="qwe"></div>
        <div id="asd"></div>
        <div id="zxc"></div>
    </body>
    </html>
    

    元素在设置left值50px和top值50px条件下,可以移动到指定的位置。相对定位是相对于元素本身的左上角进行偏移的。相对定位的偏移并没有影响到其他元素的位置。
    需要注意一点,定位模式和位置属性是配合在一起使用的,如果只定义一种,则对元素不起任何作用。
    绝对定位
    元素相对于已经定位(相对,绝对或固定定位)的父元素进行定位。若所有的父元素没有定位,则依据浏览器窗口左上角进行定位。当position属性值为absolute时,可以将元素的定位模式设置为绝对定位。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #qwe{
                width: 50px;
                height: 50px;
                background: cyan;
            }
            #asd{width: 50px;
            height: 50px;
            background: green;
            position: absolute;
           
            }
            #zxc{
                width: 50px;
                height: 50px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="qwe"></div>
        <div id="asd"></div>
        <div id="zxc"></div>
    </body>
    </html>
    

    asd叠加到zxc的上面,这说明绝对路径会脱离文档流。
    asd没有父元素,因此其定位将根据浏览器窗口左上角进行偏离。
    与浮动类似块元素绝对定位后,默认宽与内容的宽相同。
    块元素添加绝对定位后,默认宽与内容的宽相同。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
           div {   background: cyan; position: absolute;}
        </style>
    </head>
    <body>
        <div>这是一个标签</div>
    </body>
    </html>
    
    

    嵌套结构中的绝对定位。当父元素和祖先元素中由相对元素或绝对定位时,子元素的绝对定位将相对父元素和祖先元素进行定位。当父元素都没有定位属性时,子元素将相对于浏览器窗口进行偏移。
    嵌套结构中的绝对定位。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #qwe{ width: 50px; 
            height: 50px;
            background: cyan;
           margin-left:50px ;
            position:relative; }
            #asd{
                width: 50px;
                height: 50px;
                background: darkmagenta;
                position: absolute;
                top: 50px; left : 50px;
            }
        </style>
    </head>
    <body>
        <div id="qwe"></div>
        <div id="asd"></div>
    </body>
    </html>
    

    固定定位
    通过position属性值设置为fixed来实现。固定定位与绝对定位类似,也是脱离文档流。二者的不同点时当元素的position属性设置为fixed时,元素将被固定,及不会随滚动条的拖动而改变位置。在视野中,固定定位的元素的位置不会改变。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body{height: 1000px;}
        #box1{
            width: 50px;
            height: 50px;
            background: darkmagenta;
        }
        #box2{
            width: 50px;
            height: 50px;
            background: darksalmon;
            position: fixed;top: 50px;
            left: 50px;
        }
        #box3{
            width: 50px;
            height: 50px;
            background: greenyellow;
        }
        </style>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </body>
    </html>
    

    固定定位与绝对定位还有一个不同点是固定定位永远都是相对浏览器窗口左上角进行偏移。网页中的回到顶部按钮就是用固定定位实现的。
    回到顶部按钮

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        body{
            height: 10000px;
        }
        #top{
            width: 35px;
            background: hotpink;
            color: indigo;
            font-size: 12px;text-align: center;
            letter-spacing: 1px;line-height: 16px;
            position: fixed; bottom: 4px; right: 4px;
        }
        </style>
    </head>
    <body>
        <div id="top">回到顶部</div>
    </body>
    </html>
    

    定位的层次
    当多个元素添加定位操作时,可能会出现叠加情况,即在默认的情况下输出HTML结构层次就会越高。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #box1{
                width: 50px;
                height: 50px;
                background: red;
                position:absolute;
                left:0; top:0;
            }
            #box2{
                width: 50px;
                height: 50px;
                background: rosybrown;
                position: absolute; left:25px;
                top: 25px;
            }
        </style>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
    </body>
    </html>
    

    定位层次与定位属性配套使用,用于调节层次的z-index属性,其属性值用数字表示,数字越大,层级越高。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #box1{
                width: 50px;
                height: 50px;
                background: fuchsia;
                position: absolute;
                left: 0; top: 0;
                z-index: 2;
            }
            #box2{
                width: 50px;
                height: 50px;
                background: goldenrod;
                position: absolute;
                left: 25px;top: 25px;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
    </body>
    </html>
    
    展开全文
  • Css定位

    千次阅读 2016-04-27 19:01:12
    Css定位 Css定位 CSS为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的思维很简单,它允许你定义...

    Css定位

    Css定位

    CSS为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。

    定位的思维很简单,它允许你定义元素框相对于其正常的位置应该出现的位置,或者相对于父元素,另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很令人吃惊。要知道,用户代理对css2中定位的支持远胜于对其他方面的支持,对此不应感到奇怪。另一方面,CSS1 中首次提出了浮动,它以 Netscape Web 发展初期增加的一个功能为基础。浮动不完全是定位,不过,它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

    一切皆为框

    divh1 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即块框。与之相反,span strong 等元素称为行内元素,这是因为它们的内容显示在行中,即行内框

    display属性

    可以通过display属性把行内元素设定为block,变成块级元素

    Css定位机制

    Css3种基本的定位机制:普通流,浮动和绝对定位。除非专门指定,否则所有的框都在普通流中定位。也就是说,普通流中的元素的位置由元素在HTML中的位置决定。

    块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

    行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box,行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

    Css position属性

    通过使用position属性,我们可以选择4个不同类型的定位,这会影响元素框生成的方式。

    static

    元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

    fixed

    元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

    relative

    元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

    absolute

    元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

    绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

    普通流中其它元素的布局就像绝对定位的元素不存在一样:

    #box_relative {

      position: absolute;

      left: 30px;

      top: 20px;

    }

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

    对于定位的主要问题是要记住每种定位的意义。所以,现在让我们复习一下学过的知识吧:相对定位是相对于元素在文档中的初始位置,而绝对定位是相对于最近的已定位祖先元素,如果不存在已定位的祖先元素,那么相对于最初的包含块。




    展开全文
  • CSS定位

    2005-10-27 02:31:00
    现在我们要讲的CSS定位主要是在页面的布局和控制上进行定义,使您的页面从这两个方面都展现的非常完美,更加富有动感。 另外,在讲解之前,我们首先介绍两个定义:相对定位和绝对定位。相对定位就是允许在文档的原始...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,831
精华内容 13,532
关键字:

css定位