绝对定位布局——总结

position拥有三种定位方式：

1.静态定位（static)

2.相对定位 (relative)

特点：

相对与自身原有位置进行偏移

仍处于标准文档流中

随即拥有偏移属性和z-index 属性

3.绝对定位(absolute)(fixed)

特点：

建立了以包含块为基准定位

完全脱离文档流

随即拥有偏移属性和z-index 属性

延伸——设置偏移量：

父元素设置 position：relative 后子元素相对父元素定位。

无论是否存在已定位祖先元素，都保持在元素初始位置。

脱离标准文档流

时间： 2024-08-01 18:10:43

绝对定位布局——总结的相关文章

网页布局——绝对定位布局

1. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>绝对定位布局</title> 6 <style type="text/css"> 7 .wrap div{ 8 position: absolute; 9 min-height: 200px; 10 } 11 .left{ 12 lef

CSS：绝对定位布局案例 position布局实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>绝对定位</title> <style type="text/css"> @charset "utf-8"; /* DIVCSS5-CSS初始化 */ body, div, ul, li,h3{margin:0; padding:0;font

绝对定位布局

Html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>lalalal</title> 6 <link rel="stylesheet" href="css/css.css" type="text/css" />

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BusinessMeasureMainNew.aspx.cs" Inherits="SinoOcean.BI.Measure.AppPortal.Measure.BusinessMeasure.BusinessMeasureMainNew" %> <!DOCTYPE html PUBLIC &q

理解绝对定位和相对定位布局

[p=22, null, left]概要:本文主要描述XHTML中相对定位和绝对定位各自的本质.用法.区别和两者之间的关系.以及使用CSS的Left.Right.Top.Bottom属性(偏移属性)和Margin属性(外边距)对定位块级元素进行布局的方法. [p=22, null, left]说明:占位空间:元素在文档流中所占据的空间.物理空间:元素本身所占据的空间.[p=22, null, left]下面分3种情况分别对相对定位和绝对定位进行讨论:1.只使用css第一组属性布局定位元素的情况2

网页布局基础

网页布局基础简介什么是网页布局? 网页布局是网页制作的基础,使用DIV+CSS布局网页是基础中的基础.三种基本布局方式:流式布局,浮动布局,绝对定位布局. 网页设计的特点:1:网页宽度可变 2头+内容主体(根据需要分栏)+页脚(不重要的内容) 对长度设置百分比可实现网页自适应 W3C标准包括结构化标准语言,表现标准语言,行为标准语言,倡导结构,样式,行为分离. CSS中,存在三种定位机制:标准文档流,浮动,绝对定位. 标准文档流:从上到下,从左到右输出文档内容,由块级元素

详解 CSS 七种三栏布局技巧

作者:林东洲链接:https://zhuanlan.zhihu.com/p/25070186 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在开发十分常见,那么什么是三栏布局?比如我打开某东的首页: 映入眼帘的就是一个常见的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应. 下面围绕的这样的目的,即左右模块固定宽度,中间模块随浏览器变化自适应,想要完成的最终效果如下图所示: 红色

网页布局基础第四次

绝对定位布局:使用position属性实现的网页布局CSS中规定的第三种定位机制能够实现横向多列布局以及较为复杂的定位:比如:带有遮罩层效果的提示框:固定层效果:全屏广告position拥有三种形式四种值:1.静态定位 static2.相对定位 relative3.绝对定位 absolute固定定位 fixed3和4都属于绝对定位,静态定位是元素默认状态,处于标准文档流中相对定位特点:1.相对于自身原有位置进行偏移2.仍旧处于标准文档流中3.随即拥有偏移属性和z-index属性z-index:

Css布局系列-经典三列布局

今天给大家介绍经典三列布局和实现原理: 通过浮动(float)进行实现,如果对float不是很清楚可以去看看我上篇介绍的: 通过绝对定位布局: 通过float加margin的负值进行组合实现. 对三种情况分析: 第一种通过浮动(float)布局,特别需要注意在定义元素结构的时候要将居中元素放到right元素的后面(container->left-right-center),不能像正常那种思维去定义结构(container ->left-center-right): *{margin: 0;p