`

css定位和浮动

 
阅读更多
css3样式里头定位position和浮动float属性一直是设计网页的难点,通过他们能够调整网页块元素在网页的位置。
position有以下四个值:relative,absolute,fixed,static
当我们没有任何设置,默认情况下是static。
position:relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位。(自私的,走了之后还霸占这原来的位置)
position:absolute 脱离文档流,通过 top,bottom,left,right 定位。选取最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位。(无私的,走了之后位置留给大家)
fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素。
分享到:
评论

相关推荐

    css浮动和定位

    **二、CSS定位** 定位(Positioning)提供了更精细的控制,使开发者能够精确地指定元素在页面上的位置。定位分为以下几种类型: 1. **静态定位(static)**:这是元素的默认定位方式,遵循正常文档流。 2. **相对...

    CSS元素的浮动与定位综合案例3.pdf

    在CSS中,元素的浮动和定位是两种关键的技术,用于创建复杂的网页布局。在这个名为“蓝色多瑙河”的浪漫式网页布局案例中,它们被巧妙地结合使用以实现3行2列的布局。这个案例源自喻浩的《DIV+CSS网页样式与布局从...

    深入理解css布局之定位与浮动

    【深入理解CSS布局之定位与浮动】 在CSS布局中,定位和浮动是两...同时,随着CSS Flexbox和Grid布局的发展,浮动和绝对定位在某些场景下可能被替代,但仍需掌握这些基础概念,因为它们在某些特定布局中仍然不可或缺。

    精通css+div光盘

    在Web设计中,Div常被用作构建复杂页面结构的基础,通过CSS定位和浮动,可以实现响应式布局和多列布局等现代网页设计模式。 光盘中的素材涵盖了各种图片、图标、背景等设计元素,这些是创建美观网页不可或缺的部分...

    css定位绝对相对定位

    ### CSS定位详解:绝对定位与相对定位 #### 相对定位(Relative Positioning) 相对定位是一种常见的CSS定位方式,它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...

    css 相对定位 绝对定位 浮动 分析

    相对定位是CSS定位的基础,它允许元素在不改变其在正常文档流中的位置的情况下进行微调。当一个元素被设置为相对定位,通过`position: relative;`,我们可以使用`left`、`right`、`top`和`bottom`属性来调整元素相...

    前端css定位.pdf

    总的来说,CSS定位技术为前端布局提供了强大的控制能力,可以实现元素的精确布局。理解定位的工作原理及其在不同布局方式(标准流、浮动、定位)中的应用,对于前端开发者来说至关重要。在网页布局中,定位通常是在...

    CSS静止浮动

    CSS的定位主要有三种方式:静态定位(static)、相对定位(relative)和绝对定位(absolute),以及我们关注的固定定位(fixed)。默认情况下,元素都是静态定位,按照正常的文档流排列。相对定位允许元素相对于其...

    CSS实现网页分栏布局的方法:绝对定位和浮动.docx

    在CSS中,实现多栏布局通常有多种方法,而绝对定位和浮动是两种常见的技术。这两种方法各有特点,适用于不同的场景,且可以相互结合以达到更复杂的布局效果。 **1. 绝对定位** 绝对定位允许开发者精确地控制元素的...

    CSS元素的浮动与定位综合案例2源代码.pdf

    CSS定位包括`static`、`relative`、`absolute`和`fixed`四种方式。`static`是默认值,元素按照正常的文档流排列。`relative`定位使元素相对于其原本的位置偏移,不影响其他元素。`absolute`定位则相对于最近的非`...

    CSS元素的浮动与定位综合案例3源代码.pdf

    总结来说,这份文档通过一个浪漫式网页布局案例,深入浅出地讲解了CSS中的浮动和定位概念,并演示了如何使用这些技巧来创建复杂的网页布局。同时,也提醒了开发者重视网页标准和兼容性问题,以及理解CSS在提升用户...

    CSS实现网页分栏布局的方法:绝对定位和浮动.pdf

    通过为每个列设置浮动和宽度,可以实现列并排显示。例如,创建三栏布局时,左侧栏和右侧栏可以分别设置为`float:left`和`float:right`,中间栏则会自然填充剩余空间。但浮动布局的一个缺点是,当元素浮动后,它会...

    CSS元素的浮动与定位综合案例2.pdf

    2. **CSS定位**:在这个案例中,采用了“外部结构相对定位,内部结构和对象绝对定位”的原则。这意味着页面的顶级容器(如`#container`)被设置为相对定位,作为内部元素绝对定位的参考点。这样可以确保内部元素相...

    纯CSS定位的固定垂直居中浮动层代码,附经典解说:《详解定位与定位应用》

    在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实...

    CSS元素的浮动与定位综合案例1源代码.pdf

    在实际应用中,理解和掌握CSS的浮动、定位、盒模型以及响应式设计等概念是创建高效、美观且适应性强的网页布局的关键。通过深入研究和实践这样的案例,学习者能够更好地掌握这些技术,并能灵活运用到自己的项目中。

    CSS3定位和浮动详解

    CSS3作为CSS的最新标准,引入了许多新的特性,其中包括定位和浮动方面的增强。定位是CSS中控制元素位置的机制,它允许开发者精确定义元素在页面上的位置。浮动则是另一种布局手段,它能够使元素脱离标准文档流,按照...

    CSS浮动属性Float详解 什么是CSS Float?

    CSS 浮动属性 Float 是一种重要的定位属性,允许页面元素浮动在其他元素旁边。Float 属性可以取四个值:Left、Right、None 和 Inherit。其中,Left 和 Right 分别浮动元素到左边和右边,None 是默认值,使元素不浮动...

    CSS元素的浮动与定位综合案例1.pdf

    总的来说,这个综合案例1展示了如何巧妙地运用CSS的浮动和定位属性来构建复杂的网页布局。通过相对定位保持整体结构的灵活性,通过绝对定位确保各个元素的精确对齐,最终创造出具有独特视觉效果的画册式网页。学习和...

    第十三课 css元素、定位与浮动-011

    本节我们将深入探讨CSS中的元素类型、定位和浮动,这对于创建灵活且响应式的网页布局至关重要。 首先,我们来看CSS中的元素类型: 1. **行内元素**(Inline Elements):如`<a>`(超链接)、`<span>`(内联文本内容...

Global site tag (gtag.js) - Google Analytics