当前位置:首页 > 日记 > 正文

给出一个在CSS中使用位置属性的详细例子

给出一个在CSS中使用位置属性的详细例子
本文主要介绍CSS中位置属性的使用,这是CSS入门学习的基础知识。
位置属性决定了元素将如何定位。它有以下五种值:
每个页面都可以被看作堆叠在页面的一层,如下图所示。
当位置设置为相对时,元素仍在正常流中,位置是正常的,并且可以移动元素,如左向右,它影响其他元素的位置。

当一个元素的位置值是绝对值或固定值时,有三件事要发生:

该元件沿z轴的方向移动,该单元与普通流分离,因此它不再占用原始层的空间,而且它也将覆盖下层的元素。
此元素将成为块级元素,这相当于为该元素设置显示块:(对于内联元素,例如,设置绝对值后,会发现它可以设置宽度高度)。
如果元素是块级元素,则元素的宽度由原来的宽度自动改为100%(占一行)。
鉴于此,当位置设置为绝对的、固定的,它是没有必要设置显示块。如果你不想覆盖下层元素,你可以设置z-index值达到的效果。

下面是插件参数用法的一个示例:

1。位置:静态

所有元素的默认位置是位置:静态,这意味着元素不位于,它出现在文档中它应该是。

一般来说,您不必指定一个位置:静态,除非您想重写您设置的设置。

CSS代码将内容复制到剪贴板。
{ # div-1
位置:静态;
}

2。相对位置:

如果你设置位置:相对,你可以使用顶部,底部,左边和右边移动元素相对于元素应该出现在文档中的位置,这意味着元素实际上仍然占据文档中原来的位置,但是它相对于文档的原始位置在视觉上移动。

CSS代码将内容复制到剪贴板。
{ # div-1
职位:相对;
上图:20px;
左:- 40px;
}

三.位置:绝对的

当位置指定为绝对值时,该元素已退出文档,也就是说,它在文档中没有位置。可按设定的上、下、左、右准确定位。

CSS代码将内容复制到剪贴板。
{ # div-1a
位置:绝对;
顶部:0;
错误:0;
宽度:200px;
}

4。位置:相对位置:绝对

如果我们设置的相对位置对div-1,在div-1所有元素将根据你的div-1a设置绝对位置的div-1.if处,你可以移动div-1a对div-1右。

CSS代码将内容复制到剪贴板。
{ # div-1
职位:相对;
}
{ # div-1a
位置:绝对;
顶部:0;
错误:0;
宽度:200px;
}

5的绝对定位。两列

现在可以使用相对定位和绝对定位来进行两列布局。

CSS代码将内容复制到剪贴板。
{ # div-1
职位:相对;
}
{ # div-1a
位置:绝对;
顶部:0;
错误:0;
宽度:200px;
}
{ # div-1b
位置:绝对;
顶部:0;
左:0;
宽度:200px;
}

6的绝对定位。两列

一种选择是为元素设置一个固定的高度,但是这个方案对大多数设计不太合适,因为我们通常不知道有多少文本或如何使用确切的字体大小。

CSS代码将内容复制到剪贴板。
{ # div-1
职位:相对;
身高:250px;
}
{ # div-1a
位置:绝对;
顶部:0;
错误:0;
宽度:200px;
}
{ # div-1b
位置:绝对;
顶部:0;
左:0;
宽度:200px;
}

相关文章

对Excel公式的误差值提示#空!excel

对Excel公式的误差值提示#空!excel

误差,解决方案,提示,公式,电脑软件,Excel可以使我们的工作更容易,但朋友们经常要遇到一些错误的tabulas错误提示,如零误差公式,#!在本文中提到的情况是这样的,因为不正确的区域操作符或单元格的引用区域的交集是空的,让我们来看看如何解决这个问…

字体帮助实例解析字体修改

字体帮助实例解析字体修改

字体,修改字体,修改,实例,电脑软件,本教程是给朋友介绍字体的,有助于分析字体修改的例子,教程真的很好,值得学习。推荐朋友快速学习。 字体是字体查询室的延续;通过我的微信公众号,会有字体评论每天和字体的修改,新的字体设计的命题将设置每一天…

什么样的签名有2015qq最新伤感签名

什么样的签名有2015qq最新伤感签名

伤感,最新,电脑软件,qq,QQ签名是在2005开始的一个腾讯公司,通过QQ爱好者大多数是受欢迎的,而现在同样的QQ秀是QQ中不可缺少的功能,所以QQ签名是展示个性的地方,萧边提供了一些2015qq最新伤感签名,供你参考。 1,雨无声地落下,只听见云落下的灵魂在…

excel纯数字方法excel批处理转换

excel纯数字方法excel批处理转换

批处理,数字,方法,转换,电脑软件,你知道细胞内可以增加的省略号前面的'转换成数字文本,但如果用数字的方法转换,如何批量转换为纯数字计算方法对Excel的纯数字批量转换,希望对你有用萧边整理! 第一步,数字,数字前面加撇号,这种方法可使数字转换…

情人节签名快乐个性签名

情人节签名快乐个性签名

情人节,个性签名,快乐,电脑软件,别告诉我,我再也回不来昨天了。 不要告诉我,我永远不会到达明天。 灯塔永远不会孤单,因为你是海岸。 船不再漂泊,只因为你是港湾。 阳光到城市,温暖不到心 浅浅的夏天会来,又凉又薄,伤了感情。 不要打扰我的时间,不…

签名个性签名个性情人

签名个性签名个性情人

个性签名,情人,个性,电脑软件,我是一个小岛,很容易认识小岛。了解是为了理解。接下来从小编辑推荐爱好者的个性签名,希望对你有所帮助! 情人的人格签名: 没有人会记得你是对的。 当你做错的时候,呼吸是不对的。 幸福只是一个海市蜃楼,虚幻的对象…

悲伤的个性签名推荐多愁善感的个性

悲伤的个性签名推荐多愁善感的个性

推荐,个性签名,多愁善感,悲伤,电脑软件,寂寞的岁月,什么毁了我们曾经的幸福,现在想想,太牵强了。为你的QQ选择一个多愁善感的签名,这是不同的。下面是小编辑推荐的感性签名。 1,是我真的傻了,傻傻的等你回头。 2。你深深地伤害了我,我的心都是你的…

非主流伤感非主流签名

非主流伤感非主流签名

非主流,伤感,电脑软件,你一辈子都很忙,但你总是感到孤独。Rdquo,为你的QQ选择一个非主流的签名。 1,谁看到我真实的脸,痛苦的眼泪不是脸上淡淡的微笑。 2,当你想哭的时候,你的心里会有一张温暖的脸。 3、我喜欢不善言辞的人,但总是想废话连篇的你…

在excel表中,让数据按需对excel表进

在excel表中,让数据按需对excel表进

排序,数据,按需,电脑软件,excel,当你操作excel表单时,如果你想根据他们的部门对员工进行排序,这些部门的信息既不是按字母顺序也不是按笔顺排列的,而是如何按自定义顺序排序的。 1、在格式实施;具有;选项;命令,打开选项对话框,进入自定义序列;;;标签中…

性格滑稽的QQ签名和个性签名

性格滑稽的QQ签名和个性签名

滑稽,个性签名,性格,电脑软件,QQ,本文介绍了滑稽人物的搞笑QQ签名。欢迎您阅读和学习,希望能对您有所帮助。 布莱克一家去看恐怖电影,他们都变白了! 狼做世界,吃肉,狗遛狗,吃屎。 你跟谁交往,我欠你贷款到期还是什么 妈妈说:抽烟好,赌博练头脑,摇头不…

转移和形式与Web版式视图word2007e

转移和形式与Web版式视图word2007e

教程,视图,版式,形式,电脑软件,复制Excel2007工作表,创建一个新的Word2007文档,点击右下角的Web版式视图按钮,切换Word2007文档Web版式视图,然后执行粘贴命令。当Excel2007表格卡住,桌子通常是格式化。 事实上,excel的工作表是复制到word格式的,原…

画家画马工艺与马造型设计共享

画家画马工艺与马造型设计共享

画家,造型设计,工艺,画马,电脑软件,本教程是与朋友画家分享画马的过程和马的设计。这个教程真的很好。值得学习。建议看一下你最喜欢的朋友。 本教程是与大家分享的,分享画家画马的过程和马造型设计,教程真的很好,推荐,一起学习! 本教程结束,以…