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. 作业6:Java虚拟机类加载机制

    一.概述 1.定义 虚拟机类加载机制:把类的数据从Class文件加载进内存,并对数据作校验.转换解析和初始化,最终形成可被JVM直接使用的Java类型. 2.与C/C++的不同 Java不在编译时进行 ...

  2. [js]$.ajax标准写法

    $.ajax({     url:"http://www.microsoft.com",    //请求的url地址     dataType:"json",  ...

  3. 【weixin】微信企业号和公众号区别和关系是什么?

    在移动互联网快速发展和智能手机普遍应用的时代环境下,随着微信平台应用不断扩大和微信用户的迅速增加,微信公众号运营也有了很大的发展,企业.机构和个人纷纷迈入微信公众号运营的行列.微信公众号就是在微信公众 ...

  4. [转载]java的传值和传引用

    本文转载自:https://blog.csdn.net/weixin_36759405/article/details/82764339 基本类型(byte,short,int,long,double ...

  5. node 基本搭建 server.js

    const express = require('express'); const expressStatic = require('express-static'); const bodyparse ...

  6. nginx php-fpm环境搭建权限问题

    如果nginx的work process和php-fpm的运行权限相同,在logrotate的影响下,会导致被上传webshell后 被修改accesslog 故安全配置: nginx.conf: u ...

  7. 提升Scrapy框架爬取数据效率的五种方式

    1.增加并发线程开启数量 settings配置文件中,修改CONCURRENT_REQUESTS = 100,默认为32,可适当增加: 2.降低日志级别 运行scrapy时会产生大量日志占用CPU,为 ...

  8. python常用模块:pickle、shelve、json、xml、configparser

    今日内容主要有: 一.pickle模块二.shelve模块三.json模块四.json练习五.xml模块 六.xml练习七.configparser模块 一.pickle模块 #pickle是一个用来 ...

  9. java合并数组的几种方法,stream流合并数组

    一.实例代码 package cc.ash; import org.apache.commons.lang3.ArrayUtils; import java.lang.reflect.Array; i ...

  10. 第六章 组件 55 组件-使用components定义私有组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...