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. ASP.NET Core MVC里面Razor如何获取URL参数

    原文:ASP.NET Core MVC里面Razor如何获取URL参数 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https:// ...

  2. 移动站Web开发图片自适应两种常见情况解决方案

    本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...

  3. work mark

    <detection name="tracking" open="1" shape="rect" rect="(608,16 ...

  4. CentOS7安装Docker-CE并部署项目

    前言 这是我第一次使用dokcer部署项目,现学现卖.成功之后把所有用到的安装及部署和操作命令做一个总结.如有不足,请指教. 使用的是阿里云服务器.CentOS7版本. Dokcer安装 1.Cent ...

  5. java基础4(线程)

    1.请简单描述什么是并行,什么是并发? 并行:指两个或多个事件在同一时刻发生(同时发生). 并发:指两个或多个事件在同一个时间段内发生. 通俗易懂版: 你吃饭吃到一半,电话来了,你一直到吃完了以后才去 ...

  6. ASE19 团队项目 模型组 scrum report集合

    scrum report 链接 scrum1 report scrum2 report scrum3 report scrum4 report scrum5 report scrum6 report ...

  7. Spring的核心jar包

    Spring的主要jar包 四个核心jar包:beans.context.core.expression Spring AOP:Spring的面向切面编程,提供AOP(面向切面编程)的实现Spring ...

  8. fetch的文件流下载及下载进度获取

    下载过程中,获取进度,fetch API并没有提供类似xhr和ajax的 progress所以用 getReader()来循环读取大小 let size = 0; fetch( URL() + `/s ...

  9. ChinaCock打印控件介绍-TCCFujitsuPrinter实现蓝牙针式打印

    项目中遇到,要蓝牙针式打印机,用手机打印表单.感谢专家,对厂家提供的SDK进行了封装,实现利用Delphi开发出这一功能. 现在来看看,如何利用这一控件实现打印过程: procedure startS ...

  10. Oracle【二维表管理:约束】

    1.简单的表创建和字段类型最简单的方式去创建表(没有添加主键之类的约束条件)[Oracle的字段类型]number:数值类型--整数类型:number(a) 总长度a--小数类型:number(a,b ...