/*
position:static | relative | absolute | fixed | center* | page* | sticky*;
适用于:除display属性定义为:table-column-group | table-column 之外的所有元素;
static: 对象遵循常规流 4个定位偏移属性不会被应用;
relative: 对象遵循常规流 4个定位偏移属性的设置不会影响常规流中的任何元素;
absolute: 对象脱离常规流 4个定位偏移属性的设置以离自身最近的定位祖先元素,如没有则回溯到body元素;
fixed: 对象脱离常规流 偏移定位以窗口为参考 不会随滚动条滚动;
center*: 对象脱离常规流 偏移定位是以定位祖先元素的中心点为参考,盒子在其包含容器垂直水平居中;
page*: 对象脱离常规流 元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式;
sticky*: 对象在常态时遵循常规流 它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed 该属性的表现是现实中你见到的吸附效果
center和page目前兼容性基本还不支持 sticky兼容性也不太好
clip:rect(<number>|auto <number>|auto <number>|auto <number>|auto);
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值
上-左 方位的裁剪:从0开始剪裁直到设定值,即 上-左 方位的auto值等同于0;
右-下 方位的裁剪:从设定值开始剪裁直到最右边和最下边,即 右-下 方位的auto值为盒子的实际宽度和高度;
示例:clip:rect(auto 50px 20px auto)
:上边不剪切,右边从左起第50个像素开始剪切直至最右边,下边从上起第20个像素开始剪切直至最底部,左边不剪切
说明:
1.检索或设置对象的可视区域。区域外的部分是透明的。
2.这个属性将被废弃,推荐使用 clip-path 代替,在过渡阶段,仍然会存在一段时间。
3.必须将position的值设为absolute或者fixed,此属性方可使用。
*/
.position{
position: relative;
width: 200px;height: 200px;
border: 1px solid red;
/*left: 10px;top: 10px;*/
/*display: table-column-group;*/
/*display: table-column;*/
}
.clip{
position: absolute;
width: 50px;height: 50px;
background: #ccc;
left: 10px;top: 10px;
clip: rect(0 0 35px 10px); /* 剩余大小为:0px*0px */
clip: rect(0 auto 35px 10px); /* 剩余大小为:40px*35px */
}
.box1{
width: 200px;height: 200px;
border:1px solid red;
}
.center{
width: 200px;height: 50px;
border:1px solid red;
text-align: center;
line-height: 50px;
position: absolute;
left: 50%;top: 50%;
margin: -25px 0 0 -100px;
}
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。