前端基础——定位

1.绝对定位

如果所有的父元素都没有显式地定义position属性,那么所有的父元素默认情况下position属性都是static。结果,绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸,并且<html>元素也被包含在这个容器里面。简单来说,绝对定位元素会被放在<html>元素的外面,并且根据浏览器视口来定位。也可以理解成定位的元素现在相对于<body>元素。

2.z-index

z-index 值影响定位元素位于该轴上的位置;正值将它们移动到堆栈上方,负值将它们向下移动到堆栈中。默认情况下,定位的元素都具有z-index为auto,实际上为0。

请注意,z-index只接受无单位索引值;你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。 较高的值将高于较低的值,这取决于您使用的值。 使用2和3将产生与300和40000相同的效果。

3.固定定位

还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同,只有一个主要区别:绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目,如持久导航菜单。

参考资料:

原文地址:https://www.cnblogs.com/songsongblue/p/11368010.html

时间: 2024-08-28 03:45:16

前端基础——定位的相关文章

前端基础 定位

原文地址:https://www.cnblogs.com/angdh/p/12040420.html

html css 前端基础 学习方法及经验分享

前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于基础语法 对于基础语法,此处不做讲解,有需要的同学可以在w3cschool.w3school.慕课网等等进行学习.如果是刚开始接触前端,不建议通过书籍进行学习,第一是因为书籍里面有的知识可能过于陈旧,已经在新版本中被废弃,第二是因为书籍里面知识体系十分全面,很多知识可能比较难理解,且平时做项目会很少

前端基础之css复习

!/usr/bin/env python# -*- coding: utf-8 -*-#前端基础之CSS#CSS 语法#CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.''' selector { #选择器 property: value; #属性:值 property: value; ... property: value } '''#例如:#h1 {color:red; font-size:14px;}# css的四种引入方式#1.行内式# 行内式是在标记的style属性中设定

8月5日前端基础复习

复习前端基础相关知识 ctrl+tab 切换文档ctrl+tab 切换程序alt+F4 关闭程序F2 重命名F5 刷新页面windows+D 显示桌面windows+E 打开资源管理器—————— 浏览器发送过去,就是请求报文,服务器返回的信息就是响应报文.在服务器上应该存在我们请求的页面的数据.————————HTML:超文本标记语言.html是一个网页文件的扩展名.和txt,jpg,mp3是一样的.html文件就是网页文件.后缀名和文件之间是没有直接关系的.后缀名仅仅决定了文件的打开方式.真

好程序员web前端学习路线分享前端基础面试题

好程序员web前端学习路线分享前端基础面试题,希望对大家有所帮助. 1.HTML语义化的理解? 答案:HTML语义化就是让页面的内容结构化,便于对浏览器.搜索引擎解析:在没有样式CSS的情况下也以一种文档格式显示,并且是容易阅读的:搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO:使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解. 2.父元素透明,但是又不影响子元素的透明度怎么实现? 答案:方法一:用rgba 方法二:再加上一层与父元素同级的div装载子元素,定位到子元

前端基础之CSS补充

目录 选择器优先级 CSS属性相关 宽和高 字体属性 背景属性 字重(粗细) 文本颜色 文字属性 文字对齐 文字装饰 背景属性 支持简写 边框 border-radius 圆形 display属性 display:"none"与visibility:hidden的区别:** CSS盒子模型 margin (行距)*** padding (内容填充) *** Border(边框) Content**(内容) float 浮动 三种取值 浮动的简单引用 clear 浮动带的影响 清除浮动

前端基础知识

1.了解web前端基础 (1) 网页介绍 组成: 文字,图片,按钮,输入框,视频等等元素组成的 (2)web标准 :制作网页的规范 a.结构标准(HTML) b.表现标准(CSS) c.行为标准(JavaScript) 2.浏览器 谷歌    内核 :blink IE(高版本) 内核:trident 苹果浏览器: 内核webkit 欧鹏  内核: Presto  现在用的是webkit 火狐  内核: gecko 3.HEML(Hyper Text markup Language) 超级文本标记

《web 前端基础到实战系列课程》

<web 前端基础到实战系列课程> 摘要: mod_expires&mod_headers可以减少10%左右的重复请求,让重复的用户对指定的页面请求结果都CACHE在本地,根本不向服务器发出请求. 在使用之前,首先要确认一下"mod_expires"模组是否有启用.如果是自己安装Apache来架设网页主机的话,这里我们可以透过编辑Apache的"httpd.conf"设定档来处理 一.浏览器缓存原理 将该行前面的"#"字号删除

前端基础html

前端基础之html HTML 初识 web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8081)) sock.listen(5) while True: print("server is working.....") conn, address = sock.accept() request = conn.re