html中相对定位怎么写,css相对定位
定位的四种模式:static,relative,absolute,fixed
定位的四个位置:left,right,top,bottom
定位属性:position,有四种状态值
1.static:静态定位,按元素在文档流中的顺序排列,这是默认值,四个位置无效
2.relative:相对定位,元素相对于原来它在文档流中的位置进行定位,四个位置有效
3.absolute:绝对定位,元素相对于它的定位父级定位,脱离文档流,四个位置有效
4.fixed:固定定位,与绝对定位类类似,也脱离了文档流,元素在页面上的位置固定,不随页面滚动,四个位置有效
1.相对定位
.box1 {
width:200px;
height: 200px;
background-color: lightskyblue;
position: relative;
top:0;
left:200px;
}
.box2 {
width:200px;
height: 200px;
background-color: lightgreen;
/*position: static;*/
}
.box3 {
width:200px;
height: 200px;
background-color: lightcoral; /*珊瑚色*/
/*position: static;*/
/*相对定位:十字架,这个色块距顶为-200px,距左为400px*/
position:relative;
top: -200px;
left: 400px;
}
.box4 {
width:200px;
height: 200px;
background-color: brown;
/*position: static;*/
/*相对定位:十字架,这个色块距顶为-200px,距左为400px*/
position:relative;
top: -200px;
left: 200px;
}
html中相对定位怎么写,css相对定位相关推荐
- vue组件制作专题 - (mpvue专用)在mpvue中纯自己写css实现简单左右轮播
在mpvue中纯自己写css实现简单左右轮播 CSDN:jcLee95 邮箱:291148484@163.com 项目中,在src目录下的components目录下新建一个新文件并重命名为jcmv-c ...
- html中相对定位怎么写,css中的怎么设置相对定位?
设置为相对定位的元素框会偏移某个距离.元素仍然保持其未定位前的形状,它原本所占的空间仍保留. css中的怎么设置相对定位? 想要设置相对定位,需要在元素中使用position属性,将其值设置为rela ...
- html中不透明度怎么写,css如何设置div不透明度?
在IE中需要通过"filter"来定义透明度"opacity",而在Mozilla中是可以直接解析"opacity",所以如果要使得这个效果 ...
- html中透明度怎么写,css中控制透明度
CSS中如何控制层的透明度? 在CSS样式中设置背景的透明度,下面一个具体的实例.把类为box的层设为透明. .box{width:300px; height:200px; margin:0 auto ...
- html中灰色怎么写,css如何实现置灰不可点
实现a标签置灰不可点击 禁用a标签的点击事件disabled属性和pointer-events属性值 首先 ,大家要知道: a标签 是没有disable 属性的 , 如果想用disable 禁止a标签 ...
- html中绝对定位如何写,CSS如何进行绝对定位
absolute属性表示绝对定位,通过top.left.bottom.right值来设置它们相对于最近的祖先元素的位置 [推荐课程:CSS教程] 绝对定位元素的位置与文档流无关,因此它不占据任何空间. ...
- html中渐变怎么写,css颜色渐变怎么写?
CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class.ID或JavaScript. css颜色渐变可以使用css3的渐变(gradient ...
- html 中圆角怎么写,css圆角边框代码怎么写?(代码示例)
本篇文章主要给大家介绍css边框效果怎么实现的. css圆角边框代码具体示例如下: css圆角边框代码实例 div { color: white; text-align:center; border: ...
- html 中写样式,css样式中黑体怎么写
css样式中黑体怎么写 css中通过font-family指定黑体即可.font-family:"Heiti SC","黑体-简" 如果是中文字体需要加引号,字 ...
最新文章
- Centos6.5集群安装64位hadoop2.2.0
- GO语言eclipse开发环境搭建
- 鸟哥Linux私房菜(基础篇)——第五章:首次登入与在线求助 man page笔记
- OSGi介绍及OSGi的Bundle应用
- 用于单片机的几种C语言算法
- java runtime类 heap_Java 进阶(一) JVM运行时内存模型
- 2018-08-03北大青鸟S1结业 项目MyKTV的总结
- 信息系统集成将成为IT行业的主流的主要原因
- SHL笔试全攻略(转)
- 深入浅出 MFC_华中理 工_简体版电子书pdf下载
- 2015-5-23PDF的下载链接
- 生科实验室仪器维护保养,一篇就够了!
- 我的一点企业上云经验
- sas数据操作update、modify by ke=、控制modify的更新、datasets添加约束条件、操作文件变动aduit trail...
- Matlab的title如何实现换行显示?
- 飞机订票管理系统C语言课程设计
- 王兴:格局上输了,不管你多努力都不可能赢!
- Angular 4 Http
- springboot+flowable请假详细流程
- python学习-海龟作图