position:static|absolute|fixed|relative

position:static|absolute|fixed|relative

分别是静态(static),绝对定位(absolute),固定(fixed),相对定位(relative)。
position 属性值的含义:

static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。


position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序,Z-index 仅能在定位元素上奏效(例如position:absolute;)。


绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据body对象左上角作为参考进行定位。绝对定位对象可层叠,层叠顺序可通过z-index属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持)。
相对定位(relative):对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

eg:“——”长短对应方形大小、div外面是boby

层级关系为:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

为改变参照物(橘色框)后的效果
层级关系为:
<div ——————————— position:relative;最近的祖先定位元素,参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

参照物为最顶级的元素情况
层级关系为:
<div ———————————没有设置为定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

 

仅使用margin属性布局绝对定位元素的情况
此情况,margin-bottom 和margin-right的值不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。  
图9中,使用margin属性布局相对定位元素。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果图:

IE6的情况下,box2前面没有兄弟节点,则margin-left的值会出现双倍边距,见图10。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果图:

     1.向DataTable中插入新的一列                                    

        DataTable  dt = new DataTable ();
        dt.Columns.Add("字段名","字段类型"); 

        dt.Columns["字段名"].DefaultValue = 值;

       

     2.向DataTable中添加一行记录   
        DataTable  dt = new DataTable (); 
        DataRow dr = dt.NewRow();
        dr["Finishdate"] = Zfinishdate;
        dr["Operator"] =Zoperator;
        dr["disp"] =Zdisp;
        dt.Rows.Add(dr);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这里是CSS中五种常见的定位方式的介绍和用法: 1. static(静态定位):元素的位置遵循正常的文档流,不受top、bottom、left、right影响。 2. relative(相对定位):元素的位置相对于它在文档流中的初始位置进行定位,可以通过top、bottom、left、right属性进行微调。 3. absolute(绝对定位):元素的位置相对于最近的已定位祖先元素(position属性不为static)进行定位,如果没有已定位的祖先元素,则相对于文档的body元素进行定位。 4. fixed(固定定位):元素的位置相对于浏览器窗口进行定位,不随页面滚动而改变。 5. sticky(粘性定位):元素在跨越特定阈值前为相对定位,之后为固定定位。可以通过top、bottom、left、right属性进行微调。 下面是一个例子,展示了这五种定位方式的用法: ```html <!DOCTYPE html> <html> <head> <title>定位方式示例</title> <style type="text/css"> .container { height: 300px; position: relative; border: 1px solid black; } .box { width: 100px; height: 100px; background-color: red; color: white; text-align: center; line-height: 100px; font-size: 20px; } .static { position: static; } .relative { position: relative; top: 50px; left: 50px; } .absolute { position: absolute; top: 50px; left: 50px; } .fixed { position: fixed; top: 50px; left: 50px; } .sticky { position: sticky; top: 50px; } </style> </head> <body> <div class="container"> <div class="box static">static</div> <div class="box relative">relative</div> <div class="box absolute">absolute</div> <div class="box fixed">fixed</div> <div class="box sticky">sticky</div> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值