position:fixed/absolute和float的关系:
元素设置position:absolute / fixed后，float属性是没有效果的。
对于position: absolute元素，其包含元素为设有position:relative的元素；
对于position: fixed元素，其包含元素为HTML，而HTML视为窗口大小，如果html的范围大于body，可设置html最大宽度值，并body设置transform: translateX(0)属性，则fixed元素可位于body内。
对于position: relative元素，其包含块同absolute一样，但对float不为none值情况下，会先进行浮动再设置position的left或right。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>

    <title>Title</title>

    <style>

        html {

            position: relative;

            height: 100%;

            max-width: 540px;

            margin: 0 auto;

            background: #eee;

        }

        body {

            width: 100%;height: 100%;

            margin: 0 auto;

            background: #fff;

            transform: translateX(0);

        }

        .parentBox {

            position: relative;

            width: 300px;height: 150px;

            border: 1px dotted #000;

        }

        .childBox {

            position: fixed;

            float: left;

            top: 0;

            right: 0;

            width: 100px;

            height: 100px;

            border: 1px solid #fc0;

        }

        .childBox2 {

            position: absolute;

            float: left;

        }

        .childBox3 {

            position: relative;

            right: 50px;

            float: left;

        }

    </style>

</head>

<body>

    <div class="parentBox">

        <span>relative</span>

        <div class="childBox">fixed</div>

        <div class="childBox childBox2">absolute</div>

        <div class="childBox childBox3">relative<br/>right:50px<br/>float:left</div>

    </div>

</body>

</html>


 
												


											
position与float的更多相关文章
	

    
						
  1. 对CSS中的Position、Float属性的一些深入探讨
		
    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
    
		
    2. 
						
  2. CSS布局 ——从display，position， float属性谈起
		
    页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...
    
		
    3. 
						
  3. css position, display, float 内联元素、块级元素
		
    position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...
    
		
    4. 
						
  4. 装载：对CSS中的Position、Float属性的一些深入探讨
		
    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
    
		
    5. 
						
  5. CSS布局 ——从display，position， float属性谈起(转)
		
    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...
    
		
    6. 
						
  6. CSS position  overflow float  属性 详解
		
    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...
    
		
    7. 
						
  7. position,display,float,overflow,margin,padding之间的相互影响
		
    1.元素分为块级元素和行内元素, 块级元素可以设置宽高,会自动换行,并且会发生相邻margin的合并问题.行内元素设置宽和高无效,以水平方向排列,(行内元素,绝对定位,浮动元素不会发生外边距合并)并且 ...
    
		
    8. 
						
  8. 盒模型、position、float详解css重点汇总
		
    元素类型 HTML 的元素可以分为两种: 块级元素(block level element) 内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一 ...
    
		
    9. 
						
  9. Css中position、float和clear整理
		
    Position: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top",  ...
    
		
    10. 
						
  10. css定位、position与float同时使用的情况
		
    一.css定位 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. ACM - 最短路 - AcWing 849 Dijkstra求最短路 I
			
    AcWing 849 Dijkstra求最短路 I 题解 以此题为例介绍一下图论中的最短路算法.先让我们考虑以下问题: 给定一个 \(n\) 个点 \(m\) 条边的有向图(无向图),图中可能存在重边 ...
    
			
    2. 
						
  2. Linux ftp服务器部署（最简单的ftp教程）
			
    之前在阿里云领了一个ECS服务器(顺便说一句,白嫖的,真香~),就想着做点什么,然后试着做个 ftp 站点,因为第一次尝试,结果走了不少弯路.最后终于完成了,研究了两天(哎~,脑壳笨没办法)就想着记录 ...
    
			
    3. 
						
  3. 在VisualStudio调试器中使用内存窗口和查看内存分布
			
    调试模式下内存窗口的使用 在调试期间,"内存"窗口显示应用使用的内存空间.调试器窗口(如"监视"."自动"."局部变量" ...
    
			
    4. 
						
  4. PCB中的生产工艺、USB布线、特殊部件、蓝牙天线设计
			
    PCB中的生产工艺.USB布线.特殊部件.蓝牙天线设计 (2016-07-20 11:43:27) 转载▼     PCB生产中Mark点设计 1.pcb必须在板长边对角线上有一对应整板定位的Mark ...
    
			
    5. 
						
  5. HTML5 Performance
			
    简介 performance是html5的新特性之一,通过它,页面的开发者们可以非常精确的统计到自己页面的表现情况,从而有针对性的进行优化,提升用户体验. 下面是小姐姐对performance相关AP ...
    
			
    6. 
						
  6. node+express+mysql 实现登陆注册
			
    基于 node.express.mysql 实现的登录注册. 1.`首先在终端中 安装 node .` 2.`通过npm install express -g 命令全局安装 express`. 3.` ...
    
			
    7. 
						
  7. C# 委托专题
			
    单播委托:一个委托只指向一个方法: 多播委托:一个委托指向多个方法,形成一个方法链: Main是静态方法,里面只能引用静态方法,而不能引用实例方法: Main可以进行类的实例化,然后引用实例化后的方法 ...
    
			
    8. 
						
  8. java中如何创建自定义异常Create Custom Exception
			
    9.创建自定义异常 Create Custom Exception 马克-to-win:我们可以创建自己的异常:checked或unchecked异常都可以, 规则如前面我们所介绍,反正如果是chec ...
    
			
    9. 
						
  9. Android优化应用启动速度
			
    一.应用的启动 启动方式 通常来说,在安卓中应用的启动方式分为两种:冷启动和热启动. 1.冷启动:当启动应用时,后台没有该应用的进程,这时系统会重新创建一个新的进程分配给该应用,这个启动方式就是冷启动 ...
    
			
    10. 
						
  10. 【每日日报】第四十七天---<div>
			
    1 学习HTML HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器. <div> 元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后 ...
    
			
    11.