定位布局就是为开发提供了更好的布局方式,可以根据需求给相应的模块设定相应位置,从而使界面更佳丰富,代码更佳完美。

position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。

position 属性,它有4个不同类型的定位,这些类型会影响元素的生成方式,下面我们详细说明position属性。

static 定位

是静态定位,是position的默认值,元素出现在正常的流中(正常布局),静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位

absolute一致,但定位是以窗口为参考。当出现滚动条时,对象不会随着滚动,相当于位置设置之后,以浏览器未参考,他是不会改变的,可用于做界面广告(我们浏览网页是的广告,大多数都在一个位置)。

relative 定位

相对定位,他是默认参照父级的原始点为参考点,通过top,left,bottom,right这4个定位偏移属性进行偏移,不会影响常规流中的任何元素。

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于最初的包含块

通过案例介绍其四个属性,效果如图:

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
</head>
<style type="text/css">
*{margin: 0px 0px;padding: 0px 0px;} .header{
height:95px;
background: green;
} .main{
height: 255px;
background: wheat;
} p{
position: static;/*不会受到 top, bottom, left, right影响*/
top: 11px;/*设置了没影响*/
} .three{
width: 155px;
height: 155px;
position: fixed;/*固定定位相对于父div 如广告在上面一样*/
right: 16px;
top: 155px;
background-color: green;
z-index: 2;/*层的覆盖关系值越高越在上面*/
} /*相对父级div class=main来布局(没有则按照 body来布局)*/
.one{
position: relative;
width: 199px;
height: 115px;
top: 25px;
left: 25px;
background: red;
color: white;
}
/*相当于浏览器窗口来布局*/
.tow{
position: absolute;
width: 196px;
height: 55px;
top: 15px;
left: 55px;
background: gold;
} h1{
margin-bottom: 25px;
} </style>
<body>
<div class="header">
header
</div>
<p>static 正常布局 没有其他影响</p>
<div class="main">
<div class="one">我是relative 相对布局 相对父级div class=main来布局(没有则按照 body来布局)</div>
<div class="tow">我是absolute 绝对布局 相当于浏览器窗口来布局</div>
<div class="three">fixed:我是广告,我永远不会动,拖滚动条我也不动</div>
</div>
<h1>我是文本</h1>
<h1>我是文本</h1>
<h1>我是文本</h1>
<h1>我是文本</h1>
<h1>我是文本</h1>
<h1>我是文本</h1>
<h1>我是文本</h1>
<h1>我是文本</h1>
<h1>我是文本</h1>
<h1>我是文本</h1>
<h1>我是文本</h1>
<h1>我是文本</h1>
<h1>我是文本</h1>
<h1>我是文本</h1>
<h1>我是文本</h1>
</body>
</html>

通过以上代码,可以是你更方便,更容易的学习CSS的position属性,希望对你有所帮助。

Web开发中常用的定位布局position的更多相关文章

  1. 依赖注入及AOP简述(十)——Web开发中常用Scope简介 .

    1.2.    Web开发中常用Scope简介 这里主要介绍基于Servlet的Web开发中常用的Scope. l        第一个比较常用的就是Application级Scope,通常我们会将一 ...

  2. WEB开发中常用的正则表达式

    在计算机科学中,正则表达式用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在WEB开发中,正则表达式通常用来检测.查找替换某些符合规则的字符串,如检测用户输入E-mai格式是否正确,采集符 ...

  3. WEB开发中常用的正则表达式集合

    在计算机科学中,正则表达式用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在WEB开发中,正则表达式通常用来检测.查找替换某些符合规则的字符串,如检测用户输入E-mai格式是否正确,采集符 ...

  4. web开发中常用的技术体系

    HTML html(HyperText  Markup  Language)超文本标记语言"超文本"就是指页面内可以包含图片.链接.程序等非文字元素. 超文本标记语言的结构包括&q ...

  5. java web开发中常用的协议的使用和java-web 常见的缓冲技术

    一.DNS协议 作用将域名解析为IP   类似于我们只需要知道中央一台,中央二台,而不需要知道它的频率,方便记忆. java dns 域名解析协议实现 1 域名解析,将域名可转换为ip地址InetAd ...

  6. Web开发中常用的状态码

    在HtttpServletResponse类中有关于状态码的描述. static int SC_ACCEPTED Status code (202) indicating that a request ...

  7. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  8. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  9. WEB开发中的字符集和编码

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

随机推荐

  1. 170517、Redis 的安装与使用(单节点)

    IP : 192.168.4.111 1环 境: CentOS 6.6s Redis 版 本 : redis- - 3.0 0 (考虑到 Redis3.0 在集群和性能提升方面的特性,rc 版为正式版 ...

  2. Oracle之rman命令的使用(51CTO风哥rman课程)

    看rman的连接串的帮助 连接数据库 rman target/ rman的版本要和目标数据库一致(一般大版本可以往下兼容小版本) 运行操作系统命令 run {host "pwd"; ...

  3. (ubuntu ufw)My firewall is blocking network connections from the docker container to outside

    Maybe this is due to the current version, but the current answer doesn't work on my system (Docker 0 ...

  4. 测试命令运行时间:timeit和profile

    先说timeit from timeit import Timer def test1(): n=0 for i in range(101): n+=i return n def test2(): r ...

  5. (1.1)DML增强功能-CTE

    1.CTE的通用形式 WITH temp_name as ( CTE查询结果集 ) 释义: (1)with/as :关键字 (2)temp_name:为CTE临时使用名称,可以看初学者做是一个临时表 ...

  6. 002-Spring Framework-Core-01-IoC容器

    一.概述 文章地址:https://docs.spring.io/spring/docs/5.0.6.RELEASE/spring-framework-reference/ 核心主要包括:IoC co ...

  7. Linux安装rpm包时报错Header V3 DSA/SHA1 Signature, key ID 1d1e034b: NOKEY解决办法

    这是因为yum安装了旧版本的GPG key造成的,解决办法: rpm --import /etc/pki/rpm-gpg/RPM* Header V3 DSA/SHA1 Signature, key ...

  8. STM32F105 USB管脚Vbus的处理

    源:STM32F105 USB管脚Vbus的处理 对于STM32F105/107来说,为了监测USB的连接问题,程序默认是通过Vbus管脚进行检查的.但是Vbus管脚和UART1的TXD复用,导致我们 ...

  9. Linux内核参数之arp_ignore和arp_announce

    一.arp_ignore和arp_announce介绍 arp_ignore和arp_announce参数都和ARP协议相关,主要用于控制系统返回arp响应和发送arp请求时的动作.这两个参数很重要, ...

  10. linux内核分析第五周-分析system_call中断处理过程

    本实验目的:通过以一个简单的menu小程序,跟踪系统调用的过程,分析与总结系统调用的机制和三层进入的过程. 实验原理:系统调用处理过程与中断处理的机制 系统调用是通过软中断指令 INT 0x80 实现 ...