CSS通过设置position定位的三种常用定位
CSS中可以通过设置为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置,或者固定显示在某一个位置,或者显示在某一层页面之上。
position的值可以设为relative,absolute,fixed,static。
HTML代码里定义两个区块:
<div class="box">
<div class="box1"></div>
</div>
1.相对定位:
.box {
width: 50px;
height: 50px;
position: relative;
top: 50px;
left: 10px;
}
以上代码将实现将box以box最初的位置向右移动50px,向下移动10px。
2.绝对定位:
.box1 {
width: 10px;
height: 20px;
position: absolute;
top: 10px;
left: 10px;
}
以上代码将实现将box1的位置以当前的视口位置的原点为基准位置进行移动相应得距离;
如果将box1的父级设置了relative,那么box1将会以box的原点进行位移。
.box {
position: relative;
}
.box1 {
width: 10px;
height: 20px;
position: absolute;
top: 10px;
left: 10px;
}
3.固定定位:
.box {
width: 50px;
height: 50px;
position: fixed;
top: 20px;
left: 0px;
}
以上代码将会将box固定在视窗的距离顶部20px的左侧边缘位置。
使用注意点:
1.绝对定位会使元素脱离文档流,位于定位元素后面的元素将会移动到该元素的位置去填补空白区域;
2.一般情况下,绝对定位都会和ixnagdui相对一起使用;
3.使用fixed和absolute时,一定要认清谁是基准位置。
实例:实现将图片显示在视窗的固定位置(不是顶部或者底部),不随窗口的缩放而改变元素的相对位置。
<div class="aside-cover">
<div class="cover">
<div class="aside-left">
<img src="img/batlogoX.png" alt="left"/>
</div>
</div>
</div>
.cover {
width: 500px;
height: 364px;
margin: auto;
position: relative;
}
/*第二级子级绝对定位*/
.aside-left {
width: 60px;
height: 94px;
position: absolute;
top: 422px;
left: -0.2%;
overflow: hidden;
}
/*图片相对定位*/
.aside-left img {
position: relative;
left: -64px;
top: -125px;
}
通过以上代码就可以实现将想要显示的图片内容区域显示在视窗的固定位置。
CSS通过设置position定位的三种常用定位的更多相关文章
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- css中对position的几种定位方式的最佳诠释
关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示 CSS中Positio ...
- 关于css中的position定位
希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...
- CSS中的三种常用定位
一.相对定位(position:relative) 如果想让一个元素在本来的位置进行一个位移,可以将该元素的定位设置为relative,同时指定相对位移(利用top,bottom,left,right ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- css中关于position属性的探究(原创)
关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
随机推荐
- JIRA Rest JAVA Client API实现问题管理及自定义字段(原创)
JIRA是一个缺陷跟踪管理系统,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域,当我们需要把第三方业务系统集成进来时,可以调用他的API. JIRA本身的A ...
- 常见手机的useragent
设备 系统 浏览器 User-Agent 华为Mate 10 Pro Android QQ浏览器 Mozilla/5.0 (Linux; U; Android 8.1.0; zh-cn; BLA-AL ...
- OpenCV --- 实现两幅图像并排合并(ROI)
Mat img1 = imread("1.png"); Mat img2 = imread("2.png"); int height = img1.rows; ...
- LabelRank非重叠社区发现算法介绍及代码实现(A Stabilized Label Propagation Algorithm for Community Detection in Networks)
最近在研究基于标签传播的社区分类,LabelRank算法基于标签传播和马尔科夫随机游走思路上改装的算法,引用率较高,打算将代码实现,便于加深理解. 这个算法和Label Propagation 算法不 ...
- Maven私服架设(nexus / on windows)
Maven私服可以用多个不同的产品可供选择,下面我们演示使用最为广泛的nexus来架设maven本地私服 Nexus的下载及安装请见官方下载页: http://www.sonatype.org/n ...
- python处理自然语言:1、调用LTP的API,2、使用pyltp
最近在学习处理自然语言处理,就发现LTP的(哈工大语言云),这个比我最先使用的jieba分词更好,词库更大,功能也更强大. 这里介绍两种方法:1.调用LTP的API,2.使用pyltp,这里的方法基于 ...
- Java后台 解析JSON的几个方法
1.对象转JSON对象. public static void main(String[] args) { Domain demo = new Domain( "在线JSON校验格式化工具 ...
- rack简介
什么是rack rack是对ruby的Net::HTTP进行封装了的包,使用rack能够方便的新建一个简单的web应用. what is rack Rack describes itself as f ...
- 【链表】Linked List Cycle II
题目: Given a linked list, return the node where the cycle begins. If there is no cycle, return null. ...
- B+树 -- Java实现
一.B+树定义 B+树定义:关键字个数比孩子结点个数小1的树. 除此之外B+树还有以下的要求: B+树包含2种类型的结点:内部结点(也称索引结点)和叶子结点.根结点本身即可以是内部结点,也可以是叶子结 ...