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. opencv 模板匹配, 已解决模板过大程序不工作的bug

    #include <opencv2/opencv.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv ...

  2. 创建json对象

    jQuery创建json对象 方法二: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  3. idea tomcat 乱码问题的解决及相关设置

    问题,在idea中出现乱码问题,以前没有的,好像在设置系统代码为utf8之后就出现了,于是尝试了一系列办法,希望这些办法对您有帮助. 先看一下乱码的样式. 设置办法 1.在tomcat Server中 ...

  4. vue+axios请求头封装

    import { mapMutations } from 'vuex' import axios from 'axios' import { Toast } from 'mint-ui'; impor ...

  5. mysql8安装

    1.先卸载当前系统中已安装的mariadb rpm -qa | grep mariadb rpm -e --nodeps 文件名 2.安装mysql依赖包 yum install gcc gcc-c+ ...

  6. 【Day2】1.循环结构

     视频地址(全部) https://edu.csdn.net/course/detail/26057 课件地址(全部) https://download.csdn.net/download/gentl ...

  7. Intellij IDEA导入java项目看不到左边的项目目录结构

    1 重新import项目 然后导入完成,就可以了,再不行的话,删除.idea文件,重新import整个Project

  8. ubuntu版本信息查看

    1.cat /etc/issue 2.cat /etc/lsb-release 3.uname -a 4.cat /proc/version 5.lsb_release -a 显卡信息1.lspci ...

  9. Hive权限管理(十)

    Hive权限管理 1.hive授权模型介绍 (1)Storage Based Authorization in the Metastore Server 基于存储的授权 - 可以对Metastore中 ...

  10. Selenium(1)

    一.Selenium->Se(硒)->功能自动化测试工具=功能自动化测试工具(QTP)<-Mercury(汞) 1.Selenium介绍 (1)Selenium 是针对web被测系统 ...