html中的绝对定位怎么写,CSS position绝对定位absolute relative
DIV CSS position绝对定位absolute relative教程篇
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现。
一、position语法与结构 - TOP
position语法:
position : static absolute relative
position参数:
static : 无特殊定位,对象遵循HTML定位规则
absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距,但仍有补白和边框
relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
position说明:
设置对象的定位方式,可以让布局层容易位置绝对定位,控制盒子对象更加准确。
二、position实际用处 - TOP
绝对定位position用于定位盒子对象,有时一个布局中几个小对象,不易用css padding、css margin进行相对定位,这个时候我们就可以使用绝对定位来轻松搞定。特别是一个盒子里几个小盒子不规律的布局,这个时候我们使用position绝对定位非常方便布局对象。
绝对定位position示范适用图、不规律布局,为即可利用position:absolute;position:relative进行绝对定位
绝对定位与float浮动不能同时使用,比如一个大盒子里有的是绝对定位,有的是使用css float浮动定位,这样IE6浏览器将不会显示改大对象里的这些绝对定位与相对定位,这也算是IE6 CSS HACK吧,注意不要混用即可。
三、绝对定位使用条件 - TOP
position:absolute;position:relative绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位。
.divcss5{position:relative} 定义,通常最好再定义CSS宽度和CSS高度
.divcss5-a{position:absolute;left:10px;top:10px} 这里定义了距离父级左侧距离间距为10px,距离父级上边距离为10px
或
.divcss5-a{position:absolute;right:10px;bottom:10px} 这里定义了距离父级靠右距离10px,距离父级靠下边距离为10px
对应HTML结构
这样就绝对定位了“divcss5-a”在父级“divcss5”盒子内。
注意的是,left(左)和right(右)在一个对象只能选一种定义,bottom(下)和top(上)也是在一个对象只能选一种定义。
四、position应用案例 - TOP
这里DIVCSS5为大家实例应用position绝对定位,我们设置一个最外层盒子css边框为红色,css width为400px,css height为200px,内部包含了2个盒子,为就用绝对定位这2个盒子,第一个盒子CSS命名为“divcss5-a”,其宽度为100px,背景颜色为黑色,高度为100px,定位距离父级上为10px,距离左为10px;第二个盒子CSS类命名为“divcss5-b”,其宽度和高度分别为50px,css背景颜色为蓝色,距离父级下距离为13px,距离父级右边为15px。
1、css代码如下
.divcss5{ position:relative;width:400px;height:200px;
border:1px solid #000}
/* 定义父级position:relative 为就认为是绝对定位声明吧 */
.divcss5-a{ position:absolute;width:100px;height:100px;
left:10px;top:10px;background:#000}
/* 使用绝对定位position:absolute样式 并且使用left top进行定位位置 */
.divcss5-b{ position:absolute;width:50px;height:50px;
right:15px;bottom:13px;background:#00F}
/* 使用绝对定位position:absolute样式 并且使用right bottom进行定位位置 */
html中的绝对定位怎么写,CSS position绝对定位absolute relative相关推荐
- CSS position属性absolute relative等五个值的解释
目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9.IE10还没测试 ...
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- html中绝对定位如何写,CSS如何进行绝对定位
absolute属性表示绝对定位,通过top.left.bottom.right值来设置它们相对于最近的祖先元素的位置 [推荐课程:CSS教程] 绝对定位元素的位置与文档流无关,因此它不占据任何空间. ...
- CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- html中collapse代码怎么写,CSS 面试题: 手写 collapse(折叠) 的 css/html 部分
注意 根据@_小白_的建议,用input配合伪类实现效果更好, 我实现了一下, 但是在微信小程序不好使(微信的input标签的type不支持值为checkbox或radio), 所以暂时这个阶段, 处 ...
- html5中底部对齐怎么写,css设置元素底部垂直对齐
css中怎么让div里面的文字底部对齐 两种办法,第一种可以作为默认选择.两种办法都可以让文字底部对齐. css如何使div里面的文字垂直对齐 页面里有五段文字/图片,我想使每个部分的文字,像旁边的图 ...
- html中的下拉列表怎么写,css下拉列表怎么做?
CSS是一种定义样式结构如字体.颜色.位置等的语言,被用于描述网页上的信息格式化和现实的方式.CSS样式可以直接存储于HTML网页或者单独的样式单文件. 使用CSS创建一个鼠标移动上去后显示下拉菜单的 ...
- html中左右浮动怎么写,css 浮动(float)页面布局
[第一步 整体布局与公共CSS定义]我们先来分析一下这个页面 页面主要分5大块,顶部的Logo.导航条Nav.Banner.Content.Footer,如下图 下载 (116.12 KB) 2009 ...
- 在html中双虚线怎么写,CSS虚线实现方法及多种应用实例
很多 CSS 初学者在前端开发过程中,经常会用到 CSS 虚线样式,但是不知道 CSS 虚线样式该如何实现,比如一个 CSS 这样写:border-style:dotted solid double ...
最新文章
- H3C secpath nat的tcp会话数的限制设置
- JavaScript基础01【简介、js编写位置、基本语法(6种基本数据类型)】
- QT的QPlace类的使用
- R语言数据挖掘2.1.1.1 频繁项集
- Mybatis insert返回主键ID
- 计算机专业人毕业设计外文翻译,计算机专业毕业设计外文翻译.doc
- SPOJ 9939 Eliminate the Conflict
- Hie with the Pie(poj3311)
- 面试大厂被怼!这都搞不定,你只能做“搬运工”!
- JavaScript十六进制、八进制、二进制与十进制互转
- 深入理解 Linux 的 RCU 机制
- mysql5.6.35源码安装记录
- kafka自带的zk启动_KafKa 启动
- Ruby 学习笔记6
- 7-5 猴子选大王 (20 分)
- 机器学习之分类算法--mnist手写体识别
- UE5 建模(一)Shapes
- 观影笔记 |独行月球
- c语言error语句错误,【资料】C语言错误信息中文解释
- 沐阳JP1081B USB转网口 内核选项