css定位
 
方位名称:
 left  right  top  bottom
 
position:absolute 绝对定位(脱离标准流
div{
width:100px; height:100px; bacround-color:black;
position:absolute;
left:
}
特点:1、当给一个单独的元素设置绝对定位,以浏览器左上角为基准设置定位的
    2、当盒子发生嵌套关系的时候,如果父盒子没有设置定位,子盒子设置定位,定位的盒子会已浏览器左上角为基准设置定位。
    3、当盒子发生嵌套关系的时候,如果父盒子设置定位,子盒子设置定位,已父盒子左上角为基准设置定位。
    4、给盒子设置绝对定位,该盒子不占位置
    5、给行内元素设置绝对定位后,改元素转化为了行内块元素
注意:元素设置了绝对定位后,通过具体的方位名称可以随便设置元素的位置
 
position:relative 相对定位
 
特点:1、使用相对定位,位置从自身出发。
   2、还占据原来的外置
   3、子绝父相(父元素相对定位,子元素绝对定位)
   4、行内元素使用相对定位不能转行内块
 
position:fixed 固定定位
 
特点:1、固定定位不占位置
         2、将行内元素转化为行内块元素
 

第六天-css基础(css定位)的更多相关文章

  1. HTML&CSS基础-CSS的语法

    HTML&CSS基础-CSS的语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.dome.html源代码 <!DOCTYPE html> <html ...

  2. css基础-css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...

  3. css基础,css选择器

    07.29自我总结 css基础 一.什么是CSS CSS是级联样式表 CSS术语标记语言,没有逻辑 CSS作用 完成网页内容的样式与布局 二.CSS的三种引入方式 1. 内联式 书写位置:在 head ...

  4. CSS 基础:定位元素(3)<思维导图>

    这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...

  5. CSS 基础 例子 定位及z-index

    position 属性指定了元素的定位类型. position 属性的四个值: static    不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...

  6. CSS基础-4 定位

    CSS定位和浮动 css定位:改变页面的位置 定位机制有以下三种 普通流 浮动 绝对布局 定位的属性: position:把元素放在一个静态的.相对的.绝对的.或固定的位置中 top          ...

  7. css基础回顾-定位:position

    w3school 对position定义和说明是: 定义和用法: position 属性规定元素的定位类型. 说明: 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生 ...

  8. HTML+CSS基础 css的尺寸

    css的尺寸 width 宽   height高 Line-light   行高    行高是由三部分构成,上间距.文本高度.下间距. 且上下间距相等.所以文字居中 行高.一旦设置行高了,元素内部必须 ...

  9. HTML+css基础 css的几种形式 css选择器的两大特性

    3.外联样式 css选择器的两大特性 1.继承性:所有跟文本字体有关的属性都会被子元素继承.且权重是0000. 2.层叠性:就是解决选择器权重大小的一种能力,就是看那个选择器的权重大.谁的权重大听谁的 ...

  10. HTML+css基础 css选择器的种类

    css选择器的种类 标签   权重是001 类  class权重是0010 相当于255个标签选择器 Id   权重是0100相当于255个类 *通配符   代表所有的标签   权重是0000 后代选 ...

随机推荐

  1. 16-Perl 文件操作

    1.Perl 文件操作Perl 使用一种叫做文件句柄类型的变量来操作文件.从文件读取或者写入数据到文件需要使用文件句柄.文件句柄(file handle)是一个I/O连接的名称.Perl提供了三种文件 ...

  2. 用eclipse启动tomcat时报Could not publish server configuration for Tomcat v8.0 Server at localhost..错误

    网上的解决方法是: 1.如果是使用的eclipse tomcat 插件,需要在你的工作空间 找到如下文件:.metadata.plugins\org.eclipse.wst.server.cor\e\ ...

  3. css;js学习(一)

    推荐基础前端学习地址https://ke.qq.com/course/315961蝉壳学院 清除浮动 .clearfix:before,.clearfix:after{ content: " ...

  4. 【原创】大数据基础之Oozie(4)oozie使用的spark版本升级

    oozie默认使用的spark是1.6,一直没有升级,如果想用最新的2.4,需要自己手工升级 首先看当前使用的spark版本的jar # oozie admin -oozie http://$oozi ...

  5. 美国cst时间和夏令时

    美国6 PM CST相当于北京时间几点? 换算北京时间是:8:00,上午8点,日期是第二天.(换算公式:18点+14小时=第二天8点) 6 PM CST:6:00 PM Central Standar ...

  6. vue项目中实现图片懒加载的方法

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...

  7. go语言入门(5)工程管理

    在工程中不会简单到只有一个源代码文件,且源文件之间会有相互的依赖关系,早期Go语言使用makefile作为工程管理的临时方案,后来的Go命令行工具的革命性之处在于彻底消除了工程文件的概念,完全用目录结 ...

  8. 第八章· MySQL日志管理

    一.MySQL日志简介  二.错误日志 1.作用: 记录mysql数据库的一般状态信息及报错信息,是我们对于数据库常规报错处理的常用日志. 2.默认位置: $MYSQL_HOME/data/ 3.开 ...

  9. MySQL连表查询练习题

    1.建库 库名:linux50 字符集:utf8 校验规则:utf8_general_ci  create database linux4 charset utf8 default collate ...

  10. 渗透测试平台Vulnreport介绍与使用

    渗透测试平台Vulnreport介绍与使用   在这篇文章中,我们将跟大家讨论一些关于渗透测试方面的内容,并给大家介绍一款名叫Vulnreport的新型开源工具,而这款工具将能够让任何场景下的渗透测试 ...