css中的几种控制页面布局的定位机制(相对定位与绝对定位)

   CSS中几种控制页面布局的定位机制

  对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,趁有时间就好好总结一下CSS中的几种定位方式,也当自己再巩固一下。

  CSS中包含三种控制页面布局的定位机制:普通流、相对定位、绝对定位。在CSS中通过position属性表明定位机制。此外还可以使用float属性来让元素浮动

  普通流

  相应语法(默认)

  position:static;

  所谓的普通流就是根据块级元素以及内联元素自身的属性来进行布局,而不人为的进行控制。每个块级元素都换行显示,每个项目都显示在前一个项目的下一行。即使你制定了盒子的宽度,并且也有足够的宽度让两个元素并排显示,他们还是不会出现在同一行。这是浏览器处理HTML元素的默认方式,不必使用CSS属性表明元素应该出现在普通流里面

以下的所有示例都使用此HTML5代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Happy kitchen</title>
 6     <link href="test.css" rel="stylesheet" type="text/css">
 7 </head>
 8 <body>
 9     <div id="div1">Div1</div>
10     <div id="div2">Div2</div>
11     <div id="div3">Div3</div>
12
13 </body>
14 </html>

CSS代码

 1 body
 2 {
 3     width: 750px;
 4     color: black;
 5 }
 6 div
 7 {
 8     border: solid;
 9     width: 400px;
10     height: 200px;
11     text-align: center;
12 }
13 #div1
14 {
15     background-color: red;
16 }
17 #div2
18 {
19     background-color: green;
20
21 }
22 #div3
23 {
24     background-color: blue;
25 }

效果图:

  相对定位

  相应语法

  position:relative

  相对定位将一个元素从它在普通流所处的位置上进行移动,并且这种移动不会影响周围元素的位置,它们还是处于在普通流中所处的位置。

CSS代码:

 1 body
 2 {
 3     width: 750px;
 4     color: black;
 5 }
 6 div
 7 {
 8     border: solid;
 9     width: 400px;
10     height: 200px;
11     text-align: center;
12 }
13 #div1
14 {
15     background-color: red;
16 }
17 #div2
18 {
19     background-color: green;
20     position: relative;
21     top:100px;
22     left:100px;
23 }
24 #div3
25 {
26     background-color: blue;
27 }

效果图:

理解:最重要的一点,相对是相对于其在普通流中的位置来说的,就是使用浏览器默认布局效果来说的。此时的Div2在其原来的位置上分别向下、向右移动了100px。并且另外一点,它不会影响Div3的位置,Div3还是在原来的位置上。

  绝对定位

   相应语法

  position:absolute;

绝对定位的元素相对于它的包含元素,包含元素可能是文档中的另一个元素或者是初始包含元素,说白了,就是沿着其父层找已经定位的元素。它完全脱离了普通流,也就是说不会影响到周围任何元素的位置(就像是直接忽略掉它所占据的空间)。

 1 body
 2 {
 3     width: 750px;
 4     color: black;
 5 }
 6 div
 7 {
 8     border: solid;
 9     width: 400px;
10     height: 200px;
11     text-align: center;
12 }
13 #div1
14 {
15     background-color: red;
16 }
17 #div2
18 {
19     background-color: green;
20     position: absolute;
21     top:100px;
22     left:100px;
23 }
24 #div3
25 {
26     background-color: blue;
27 }

效果图:

理解:Div2的父层元素body没有使用定位,而body没有再往上的父层元素了,因此Div2实际上是相对于屏幕左上角分别向下、向右移动了100px。而Div2使用了绝对定位之后,从普通流中脱离,不再在流中占据空间,此时的Div3的上一个元素变成了Div1,因此Div3就按照普通流的顺序排在了Div1的后面。

假如我们给body元素也是定位,使用如下的CSS代码,效果就又不一样了

 1 body
 2 {
 3     width: 750px;
 4     color: black;
 5     position: relative;
 6     top:100px;
 7 }
 8 div
 9 {
10     border: solid;
11     width: 400px;
12     height: 200px;
13     text-align: center;
14 }
15 #div1
16 {
17     background-color: red;
18 }
19 #div2
20 {
21     background-color: green;
22     position: absolute;
23     top:100px;
24     left:100px;
25 }
26 #div3
27 {
28     background-color: blue;
29 }

理解:此时body不在屏幕的左上角了,相对于屏幕左上角分别向下、向右移动了100px,前一份代码body是位于屏幕左上角的。此时Div2的父层元素body使用了定位,因此Div2相对于body的起始位置分别向下、向右移动了100px,达到了现在的效果

对于绝对定位来说,使用了绝对定位的元素的位置相对于最近的已定位的祖先元素,如果没有已定位的祖先元素,那么它的位置相对于最初的包含块

原文地址:https://www.cnblogs.com/572354941hnit/p/11564307.html

时间: 2024-11-05 11:53:27

css中的几种控制页面布局的定位机制(相对定位与绝对定位)的相关文章

css+div网页设计(二)--布局与定位

在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子模型的范围包括 margin.border.padding.content. 需要指出的一点是,在ie中与firefox中盒子模型表示略有不同: IE 盒子模型的 content 部分包含了 border 和 pading. 而firefox中的盒子模型的content部分不包含border和pad

CSS中的几种定位简介

相对于元素在正常情况下出现在页面文档流的位置,CSS提供了几种方法来定位. 静态定位(static)表示按照正常定位方案,元素盒按照在文档流中出现的顺序依次格式化: 相对定位(relative)将移动元素盒,但是它在文档流中的原始空间会保留下来: 绝对定位(absolute)是指元素盒彻底从文档流中脱离出来,并相对于其容器块进行定位.因为这些元素从文档流中脱离出来,所以它们不再影响周边元素的布局,并且它们占据的空间不被保存: 固定定位(fixed)与绝对定位类似,元素从文档流中脱离,但是它们不是

《转载》CSS中的三种样式来源:创作人员、读者和用户代理

CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式,很多第一次学习CSS的朋友,对这三种来源可能会存在一些困惑,下面我写一下自己的理解,若有错误的地方还请指正. 首先,创作人员(author’s style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样式就叫做创作人员样式. 然后是用户代理样式(agent’s style),用户代理也就是我们通常所说的浏览器(IE.Firefox等等),这些浏览器会提供一些默认的样式,比如IE浏览器中,一

CSS中的三种样式来源:创作人员、读者和用户代理

CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式. 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样式就叫做创作人员样式. 然后是用户代理样式(agent's+style),用户代理也就是我们通常所说的浏览器(IE.Firefox等等),这些浏览器会提供一些默认的样式,比如IE浏览器中,一个纯粹由html代码构成的网页里,我们会发现超链接会带有一个蓝色的前景色,这其实就用户代理样式,借用一些插件

Java三大框架之——Hibernate中的三种数据持久状态和缓存机制

Hibernate中的三种状态   瞬时状态:刚创建的对象还没有被Session持久化.缓存中不存在这个对象的数据并且数据库中没有这个对象对应的数据为瞬时状态这个时候是没有OID. 持久状态:对象经过Session持久化操作,缓存中存在这个对象的数据为持久状态并且数据库中存在这个对象对应的数据为持久状态这个时候有OID. 游离状态:当Session关闭,缓存中不存在这个对象数据而数据库中有这个对象的数据并且有OID为游离状态. 注:OID为了在系统中能够找到所需对象,我们需要为每一个对象分配一个

用div和css样式控制页面布局

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>网页布局练习</title> 6 7 <link href=&qu

AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面。。。

第一步:引入必要的js: 1 <script src="js/lib/angular.js"></script> 2 <script src="js/lib/angular-animate.min.js"></script> 3 <script src="js/lib/angular-route.min.js"></script><br><br><

CSS中的三种选择器

第一种:标签名选择器 格式:标签名{                    属性一:属性值:                    属性二:属性值:                    ...               }      例子:第一步:div{ background-color:#00ff00; font-size:20px;                 } 第二步:<div> 第二种方式</div > 第二种:类名选择器 格式:.类名{ 属性名:属性值; 属性

详解CSS中的几种长度px、em、pt

说说css的几种距离吧,大致有px.em.pt.pc.in.mm.cm.ex八种,其中最常见到的是px,我还见到过的有ex和mm.cm,当然后两个在当年见的更多. 其实px,我们最熟悉,而在电脑上也应用最多,因为显示器的分辨率就是...px*....px,我们知道分辨率的话是不是对于浏览器最大时对界面的实际更方便简洁,应该有这么个原因吧. 而em则是相对长度单位,是相对于系统的默认字体尺寸来的: 至于我们最常见的mm和cm就是我们纯正意义上的cm和mm了,他们都是绝对长度单位,带了"绝对&quo