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. 学习openstack（六）
			
    VIII openstack(1) 传统的数据中心面临的问题:成本.效率(要快).管理方面(物理机.云主机): 云计算:对运维需求总体量是减少了,尤其是硬件工程师,对运维的技术要求提高了: 云计算是个 ...
    
			
    2. 
						
  2. 插值方法 - Lagrange插值多项式
			
    Lagrange插值多项式代码: 1 # -*- coding: utf-8 -*- 2 """ 3 Created on Wed Mar 25 15:43:42 202 ...
    
			
    3. 
						
  3. 10分钟go crawler colly从入门到精通
			
    Introduction 本文对colly如何使用,整个代码架构设计,以及一些使用实例的收集. Colly是Go语言开发的Crawler Framework,并不是一个完整的产品,Colly提供了类似 ...
    
			
    4. 
						
  4. c++的常用库
			
    C++ 资源大全 关于 C++ 框架.库和资源的一些汇总列表,内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和 ...
    
			
    5. 
						
  5. 惯性传感器（IMU）
			
    近两年来,车联网.自动驾驶.无人驾驶.汽车智能化.网联化等成为了汽车行业的热点话题,未来汽车一定是朝着安全.可靠及舒适的方向发展.而这一切背后的发展都离不开传感器的作用,今天我们就来聊聊用途越来越广的 ...
    
			
    6. 
						
  6. Linux文件管理 |  Linux 文件基础知识
			
    目录 Linux 常用文件类别 Linux 目录结构概述 LInux 系统目录及说明 一.Linux 常用文件类别 1.文件   在Linux上系统上,有一切皆文件的说法,就是说任何软件和I/O设备都 ...
    
			
    7. 
						
  7. 解决IDEA中控制台输出乱码
			
    1. 修改VM Options(2种方法) 第一种,直接修改Tomcat中的 VM Options,这种只对当前项目有效 (1)先点击 Run -> Edit Configurations- 2 ...
    
			
    8. 
						
  8. JavaScript实现按钮改变网页背景色
			
    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
    
			
    9. 
						
  9. c++对于c的拓展_引用的本质是指针常量
			
    本质:c++底层实现的指针常量(Type & ref =val; // Type *const ref =&val)
    
			
    10. 
						
  10. 使用 Jenkins 进行持续集成与发布流程图-图解
			
    
			
    11.