绝对定位 | 易学教程

深入css布局 (2) — 定位与浮动

阅读更多关于深入css布局 (2) — 定位与浮动

深入css布局(2) — 定位与浮动在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。上篇文章我们讲完了css布局中盒模型和元素分类的相关知识，同时介绍了box-sizing和行框。这篇我们继续... 一、定位与浮动上篇我们讲解了不同类型元素的特点，我们可以随意的排列组合他们来达到我们想要的效果。但是他们都是基于一个二维平面的，如果我们想在布局中有遮挡，重叠之类的更丰富效果，我们就需要使用到定位和浮动的相关知识。 1.1 文档流文档流就是按照页面元素书写的顺序，将页面元素按从左到右，从上至下的一般顺序进行排列。那么也就可以理解成我们刚才所说的一个二维平面的概念。那么如果我想要实现更丰富的效果，就需要脱离文档流，在一个新的平面上去显示，这样我们就可以在屏幕上有多个平面叠加显示的效果了，那么这就是浮动和定位的工作了。 1.2 定位定位允许你使用 position 属性，将一个元素相对于他自己或者他的祖先元素甚至是浏览器窗口通过 top , left , right , bottom 属性进行偏移。根据 position 属性的取值，元素可以分为静态定位元素 static （默认值）、相对定位元素 relative 、绝对定位元素 absoute 和固定定位元素

CSS基础知识（定位、浮动）

阅读更多关于 CSS基础知识（定位、浮动）

12 、浮动特点：将当前元素脱离文档流 float: left 即左浮动 float: right 即右浮动注：*父与子元素，设置子元素浮动不能超出父元素的范围 *多个元素均设置为浮动时，将自动排列(水平方向) *兄弟元素，后一个元素设置为浮动，前一个元素不浮动，后一个元素的位置不能超过前一个元素的位置 *文字内容不会被浮动元素所覆盖，而是环绕在浮动元素的周围。 i 清除浮动 clear none - 不清除 left - 清除左浮动 right - 清除右浮动 both - 清除两侧的浮动 i 高度塌陷设置：父级元素- 未设置高度；子级元素- 设置高度，且浮动结果: 父级的显示高度为 0 默认情况下，未设置宽高；默认宽度是当前页面整个宽度；高度是0或子元素高度的总和 u 解决方案 (1)为父元素设置高度(所有子元素高度的总和) 问题：人为为父级元素设置 height 属性；父级元素的 height 属性值，计算得来的 (2)将父和子元素同时设置为浮动父元素未设置宽度和高度结果: 父级的宽度和高度分别所有子元素的宽度和高度的总和 (3)clear属性来清除浮动 l BFC块极格式化环境全称：Block Formatting Context，是元素的隐含属性。默认情况下BFC是关闭的，当元素开启BFC以后，将会具有如下特性：

CSS 定位与浮动

阅读更多关于 CSS 定位与浮动

CSS 定位　　 Static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。　　相对定位(relative)：与最近的一个元素进行定位。相对于原始的位置进行移动注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。　　绝对定位（absolute）：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。（是以html的边框为参照的）注意：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。在下面这个例子中，与上面一个元素出现了层叠：设置top:20px;导致了间距不够，就进行覆盖。　 1 <html> 2 <head> 3 <style type="text/css"> 4 h2.pos_abs 5 { 6 position:absolute; 7 left:100px; 8 top:20px 9 } 10 </style> 11 </head> 12 13 <body> 14 <h2 class=

HTML与CSS定位体系概述

阅读更多关于 HTML与CSS定位体系概述

什么是定位体系？定位体系分三种：常规流（normal flow）、浮动（float）、绝对定位（absolute positioning）。 1. 常规流：从直观上理解正常流指的是元素按照其在HTML 中的位置顺序决定排布的过程，主要的形式是自上而下，一行接一行，每一行从左至右。 2. 浮动：相对于常规流来讲，它漂浮在常规流的上方。其可以使元素脱离文档流，按照指定方向发生移动。 3. 绝对定位（absolute positioning）： a.static（常规流）：其为默认，一般的元素的定位都是静态定位。 b.relative（相对位置）：相对定位如其名相对于自身来定位，通过left、right、top、bottom进行定位后，元素会根据原来的位置进行移动，需要注意的是使用position：relative的元素不会脱离文档流，元素本身占据的位置也会保留。 c.absolute（绝对位置）：其定位是布局中比较常用的定位，在使用时其生成的位置是相对于最近的已定位父（祖先）级来定位；position：absolute属性是脱离文档流的，重新定位后元素不会占据原来的位置. <style> .relative{ width: 100px; height: 100px; position: relative; border: 2px solid red; } .absolute{

css--position

阅读更多关于 css--position

CSS 定位 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 relative 相对定位元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。buttom如果为正数，则向上移动，right如果为正数，则向左移动 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; right:20px; } .pos_top{position: relative; bottom: 40px; } </style> </head> <body> <h2>这是位于正常位置的标题</h2> <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2> <h2 class="pos_right"

CSS

阅读更多关于 CSS

1.CSS介绍 CSS是Cascading Style Sheets的简称，中文称为层叠样式表，对html标签的渲染和布局 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明 2.CSS语法实例注释 /*这是注释*/ 在写css样式的时候要写一个 body{ margin:0; } 意思是说，body的上下左右的margin都设置为0 在下面会将为什么 3.CSS的集中引入方式 3.1行内式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 3.2.内嵌式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3.3链接式* 外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> #现在写的这个.css文件是和你的html是一个目录下

CSS布局中position详解

阅读更多关于 CSS布局中position详解

本文旨在普及一下position的用法，CSS中position的使用率相当之高，对于新入行的小白，不仅要知其然，还要知其所以然。 position（定位类型），主要有4种属性值 : static、fixed、relative、absolute，任何元素的默认position属性值都是static（静态）。元素可以使用TRBL定位，但必须先设定position属性，否则无法发挥效果。根据不同的position属性值，TRBL作用不同。下面是各个属性值的简单介绍： static，为position的默认属性值，即没有定位，元素出现在正常的流中，静态定位的元素不会受到top, bottom, left, right影响。 fixed：元素位于浏览器窗口固定位置，即使窗口滚动也不会移动；Fixed定位使元素位置脱离文档流，因此不占据空间；Fixed定位的元素可以和其他元素重叠。 absolute（绝对定位）：其元素位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>即浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位； relative（相对定位）：是相对于元素的正常位置，配合TRBL进行定位。相对定位时存在元素重叠现象，但原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。

web——CSS中position属性( absolute 、 relative 、static 、 fixed )详解

阅读更多关于 web——CSS中position属性( absolute 、 relative 、static 、 fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义： static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。怎么样，是不是还是很迷糊~~ 没关系，下面就从几个基础概念一一给大家详述：什么是文档流？将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。静态定位(static) ： static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z

CSS之position详解

阅读更多关于 CSS之position详解

定义和用法 position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。　　 position属性有五个可选值，分别是absolute、fixed、relative,static,inherit. absolute : 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left,top,right以及bottom属性进行规定。 fixed : 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left、top、right以及bottom属性进行规定。 relative : 生成相对定位的元素，相对于其正常位置进行定位。 static : 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit : 规定应该从父元素继承 position 属性的值。 relative relative是相对于其正常文本流中的位置进行偏移。如下代码： <html lang="en"> <head> <style type="text/css"> #item1 { width:100px; height:100px;

css定位-position的用法详解

阅读更多关于 css定位-position的用法详解

定义和用法 position 属性规定元素的定位类型。定位类型 static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。 inherit：规定应该从父元素继承 position 属性的值。什么是文档流？将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。 <div style="position:relative; width:300px; height:300px; background-color:silver; border:5px solid red;"> <div style="width:100px; height:100px; background

订阅绝对定位