文档章节

网页布局基础(3)-绝对定位布局

iBazinga
 iBazinga
发布于 2016/12/04 16:55
字数 210
阅读 7
收藏 0
CSS

基础知识

position属性具有3种定位形式:



一、相对定位

特点:

        相对于 自身原来的位置 进行偏移;

        仍处于标准文档流中;

        随即拥有偏移属性和z-index属性 // z轴堆叠

二、绝对定位(*)

特点:

        建立包含块为基准的定位;

        完全脱离了标准文档流;

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

(一)未设置偏移量

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

        脱离了标准文档流​​

(二)设置偏移量

        无已定位祖先元素,以<html>为偏移参照基准;

        有已定位祖先元素,以距离其最近的已定位祖先元素为偏移参照基准​​

© 著作权归作者所有

共有 人打赏支持
iBazinga
粉丝 11
博文 128
码字总数 42533
作品 0
深圳
程序员
CSS 基础入门语法

盒模型--边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框:...

御前带刀红衬衫
2016/07/28
15
0
css页面布局

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<addr......

小神神的大草原
2016/09/05
14
0
三种三栏网页宽度自适应布局方法

一、前言 在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择。当然,具体实现不是那么容易,需要一定的css功力和实践经验。本文不讲细节,只讲...

乱世中的单纯
2016/03/14
768
0
css的盒子模型

网页布局的本质就是把网页中的元素,例如文字。图片等放在一个盒子里,然后利用css来摆放盒子达成想要的效果,就是网页布局 css的三大模型 1.普通流 2.浮动 元素添加浮动以后,会自动转换成行...

邮币财富-张起荣
03/12
0
0
后端工程师入门前端页面重构(一):口诀

本文由 KnewHow 发表在 ScalaCool 团队博客。 大家好,我是 KnewHow,一名前 Java 开发工程师。为什么要说是「前」呢?这要从两周前我加入一家新公司说起。 入职第一天,实习导师告诉我会有一...

2017/12/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringCloud SpringBoot mybatis分布式Web应用的统一异常处理

我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况。Spring Boot提供了一个默认的映射:/error,当处理中抛出异常之后,会转到该请求中处理,并且该请求有一个全局的错误页面用...

itcloud
16分钟前
0
0
c++ std::bind和std::function

定义于头文件 <functional> std::bind 函数绑定,https://zh.cppreference.com/w/cpp/utility/functional/bind // bind 用例#include <iostream>#include <functional> // 自定义的一......

SibylY
19分钟前
0
0
SecureCRT的安装与破解(过程很详细!!!)

SecureCRT的安装与破解(过程很详细!!!) SecureCRT的安装与破解(过程很详细!!!) 使用SecureCRT可以方便用户在windows环境下对linux主机进行管理,这里为大家讲一下SecureCRT的破解方...

DemonsI
23分钟前
0
0
介绍几款可用的web应用防火墙

目前有两款,基于软件和基于应用程序的web应用防火墙。基于软件的产品布置在Web服务器上,而基于应用程序的产品放置在Web服务器和互联网接口之间。两种类型的防火墙都会在数据传入和传出web...

上树的熊
30分钟前
1
0
用Visual Studio开发以太坊智能合约

区块链和以太坊 自从我熟悉区块链、以太坊和智能合约以来,一直失眠。 我一直在阅读,阅读和阅读,最后我能够使用一些工具,他们建议使用以太坊网站官方客户端应用程序(Ethereum Wallet)也...

geek12345
32分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部