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. Java 中 notify 和 notifyAll 有什么区别？
			
    notify() 方法不能唤醒某个具体的线程,所以只有一个线程在等待的时候它才有 用武之地.而 notifyAll()唤醒所有线程并允许他们争夺锁确保了至少有一个线程 能继续运行.
    
			
    2. 
						
  2. java-中的代理
			
    静态代理: 例子: 接口: public interface InterfaceBase { void proxy(); } 接口实现类: public class InterfaceBaseReal ...
    
			
    3. 
						
  3. 那么如何使用WebSQL？
			
    我们需要做的第一步是通过使用"OpenDatabase"函数开放数据库,如下图所示.第一个参数是数据库的名称,接下来是版本,然后一个简单的文本标题,最后的是数据库的大小. var  ...
    
			
    4. 
						
  4. runnable 和 callable 有什么区别
			
    callable 有返回值,并允许抛出异常 runnable 没有返回值,不会抛出异常
    
			
    5. 
						
  5. Mybatis-Plus 如何实现一对多关系 举例 用户与角色
			
    Mybatis-Plus 一对多Mybatis-Plus 不写一句sql语句实现一对多 首先来看效果 Mysql数据库 用户表 角色表 用户与角色的中间表 中间表如下 将三张表通过Mybatis Pl ...
    
			
    6. 
						
  6. stm32 中库函数、结构体、地址的强制类型转换、相应特殊功能寄存器之间的关系
			
    以一个挂接在APB2上的外设函数使能为例 A : RCC_APB2PeriphClockCmd():时钟使能函数 1 RCC_APB2PeriphClockCmd(RCC_APB2Periph_AFI ...
    
			
    7. 
						
  7. 三、原理图生成网表并导入PCB放置元件
			
    1.生成网表 2.成功标志 3.新建PCB文件 4.导入网表至PCB 5.导入网表成功标志 6.创建.psm文件(绘制的封装格式为.dra文件,在PCB里面要以.psm的文件存在)  将丝印做成封装需 ...
    
			
    8. 
						
  8. IdentityServer4系列 | 支持数据持久化
			
    一.前言 在前面的篇章介绍中,一些基础配置如API资源.客户端资源等数据以及使用过程中发放的令牌等操作数据,我们都是通过将操作数据和配置数据存储在内存中进行实现的,而在实际开发生产中,我们需要考虑如何 ...
    
			
    9. 
						
  9. Android Studio 异常以及解决方案
			
    1. Error:(1, 0) Plugin is too old, please update to a more recent version, or set ANDROID_DAILY_OVER ...
    
			
    10. 
						
  10. Mybatis + js 实现下拉列表二级联动
			
    Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...
    
			
    11.