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. leedcode_13 罗马数字转整数
			
    罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值I 1V 5X 10L 50C 100D 500M 1000例如, 罗马数字 2 写做 II ,即为两个并列的 1 .12 ...
    
			
    2. 
						
  2. CPU架构：CPU架构详细介绍
			
    1 概述 CPU架构是CPU商给CPU产品定的一个规范,主要目的是为了区分不同类型的CPU.目前市场上的CPU分类主要分有两大阵营,一个是intel.AMD为首的复杂指令集CPU,另一个是以IBM.A ...
    
			
    3. 
						
  3. 8.5_线性控制器设计_轨迹跟踪(Follow a Desired Path)
			
    平衡点时所有的导数都为0 simulink中建立状态方程模型
    
			
    4. 
						
  4. 线性二次型控制器（LQR）——轨迹跟踪器
			
    1 概念 2 线性时变系统的跟踪问题 3 线性定常系统的跟踪问题 公式18--22为求解的关键     根据20.21分别求出P.g的值则通过18可求得期望的输出u 4 实例分析 5 仿真实验 先将上 ...
    
			
    5. 
						
  5. c/c++中的i++和++i的区别
			
    使用 i++ vs. ++i i++是先赋值再加1 ++i是先加1再赋值 到目前为止,你已经学习了如何编写下面这样的 C++ for 循环: for (int i = 0; i < 10; i+ ...
    
			
    6. 
						
  6. 内网穿透系列-Go语言
			
    一.介绍 软件在KCP出现后进行了重构,将其底层UDP支持替换为了KCP,使其效率大大提高,在某些恶劣的网络环境下依旧能有不错的效果.当然,它也是支持TCP模式的,另外它也是支持加密的,在P2P打洞失 ...
    
			
    7. 
						
  7. 如何使用Flannel搭建跨主机互联的容器网络
			
    当您将多台服务器节点组成一个Docker集群时,需要对集群网络进行设置,否则默认情况下,无法跨主机容器互联,接下来我们首先分析一下原因. 跨主机容器互联 下图描述了一个简单的集群网络,在该集群内,有两 ...
    
			
    8. 
						
  8. 简单才是美! SpringBoot+JPA
			
    SpringBoot 急速构建项目,真的是用了才知道,搭配JPA作为持久层,一简到底!下面记录项目的搭建,后续会添加NOSQL redis,搜索引擎elasticSearch,等等,什么不过时就加什么 ...
    
			
    9. 
						
  9. Javascript Symbol 隐匿的未来之星
			
    ES6中基础类型增加到了7种,比上一个版本多了一个Symbol,貌似出现了很长时间,但却因没有使用场景,一直当作一个概念层来理解它,我想,用它的最好的方式,还是要主动的去深入了解它吧,所以我从基础部分 ...
    
			
    10. 
						
  10. 定制卡牌式 banner
			
    HTML <template> <view > <swiper class='swiperClass' autoplay interval="2000" ...
    
			
    11.