CSS:定位

定位

1、static定位

无定位

2、fixed定位

相对于窗口得定位

3、relative定位

相对于自己得正常位置,可以使用left right top bottom进行元素得微调

4、absolute定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:

5、sticky 定位

sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div.sticky {position: -webkit-sticky;position: sticky;top: 0;padding: 5px;background-color: #cae8ca;border: 2px solid #4CAF50;
}
</style>
</head>
<body><p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p><div class="sticky">我是粘性定位!</div><div style="padding-bottom:2000px"><p>滚动我</p><p>来回滚动我</p><p>滚动我</p><p>来回滚动我</p><p>滚动我</p><p>来回滚动我</p>
</div></body>
</html>

子绝父相

是一种常用的定位方式,用于实现子元素相对于父元素进行绝对定位。具体来说,当一个父元素使用相对定位(position: relative)时,其子元素可以使用绝对定位(position: absolute)相对于父元素进行定位。

子绝父相的主要作用包括:

精确定位:通过子绝父相可以实现对子元素的精确定位,使得子元素可以相对于父元素的特定位置进行定位,而不受其他元素的影响。
层叠效果:子绝父相可以实现层叠效果,即子元素可以覆盖在父元素之上,实现一些视觉上的效果。
响应式设计:使用子绝父相可以实现在不同屏幕尺寸下对子元素位置的灵活控制,从而实现响应式设计。
布局设计:在一些特定的布局设计中,子绝父相可以帮助实现一些复杂的布局结构,比如对话框、菜单等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/690507.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CAN收发器芯片PCA82C250 TXD RXD引脚方向说明

PCA82C250 收发器芯片TXD RXD和以往TTL的USART接口上TXD RXD方向和定义不同。不可直接连接TTL USART引脚&#xff0c;应该要连接CAN专用的TXD RXD引脚。 并且TXD RXD引脚有方向。其中TXD引脚是输入&#xff01; RXD引脚是输出&#xff01; 即TXD RXD引脚的方向 不是相对以本体…

第13章 基于Java Swing的图书管理系统

13.1 需求分析 在当今社会&#xff0c;随着信息技术的不断发展&#xff0c;信息管理系统已经进入到了人类社会的各个领域&#xff0c;人们对于信息技术的掌握也越来越迅速。在图书管理的过程中也引入图书管理体系&#xff0c;图书管理系统将大大节省人力、物力、时间、金钱等资…

ART-Pi LoRa开发套件 不完全教程

1 前言 ART-Pi LoRa 开发套件(LSD4RFB-2EVKM0201)是利尔达科技与睿赛德科技联合出品的一套面向物联网开发者的 LoRa 产品原型设计工具包&#xff0c;搭配ART-Pi主板使用&#xff0c;支持利尔达全系 LoRa 节点与网关模块&#xff0c;拥有丰富的可选配件&#xff0c;用户 可按需…

C++6.0

思维导图 .编程题&#xff1a; 以下是一个简单的比喻&#xff0c;将多态概念与生活中的实际情况相联系&#xff1a;比喻&#xff1a;动物园的讲解员和动物表演 想象一下你去了一家动物园&#xff0c;看到了许多不同种类的动物&#xff0c;如狮子、大象、猴子等。现在&#xff0…

【深入理解设计模式】单例设计模式

单例设计模式 概念&#xff1a; 单例模式&#xff08;Singleton Pattern&#xff09;是 Java 中最简单的设计模式之一。 单例设计模式是一种创建型设计模式&#xff0c;其主要目的是确保类在应用程序中的一个实例只有一个。这意味着无论在应用程序的哪个位置请求该类的实例&a…

单播、组播,广播介绍

单播、组播和广播是网络通信中的三种不同的数据传输方式&#xff0c;它们的主要区别在于数据传输的目标地址&#xff1a; 1. 单播&#xff08;Unicast&#xff09;&#xff1a;单播是指在网络中发送数据时&#xff0c;数据只会被发送到一个特定的目标地址。在单播传输中&#x…

【Vue2】element 穿梭框使用

<el-dialog :title"title" :visible.sync"showTransfer" width"650px" append-to-body><el-transfer :props"{key: stationId,label: stationName}":titles"[未关联电站, 已关联配电站]" :filterable"false&q…

IO 作业 24/2/19

1> 使用fread和fwrite完成两个文件的拷贝 #include <myhead.h> int main(int argc, const char *argv[]) {//定义被复制文件指针FILE *fp1NULL;if((fp1fopen("./111.bmp","r"))NULL){perror("error open");return -1;}//定义目标文件指…

Elasticsearch 与 OpenSearch:开源搜索技术的演进与选择

在2010年以Apache 2.0开源协议发布后&#xff0c;Elasticsearch迅速成为全球最受欢迎的企业搜索引擎。 Elasticsearch常与Logstash和Kibana一起部署&#xff0c;这一组合被称为 Elasitc Stack&#xff0c;用于启用日志分析用例&#xff0c;包括应用可观察性、安全日志分析和理解…

opencv计算机视觉

树莓派主机的无键盘解决 进入控制面板&#xff0c;更改适配器设置&#xff0c;WIFI属性&#xff0c;勾选 1.将网线两头分别接入树莓派和笔记本的网线接口 2.在无线连接属性那里勾选允许其他用户连接 3.运行cmd使用arp -a查看树莓派ip地址&#xff0c;或者使用ipscanner查看 cmd…

Springboot+vue的疫情信息管理系统(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的疫情信息管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的疫情信息管理系统&#xff0c;采用M&#xff08;model&a…

计算机专业必看的几部电影

计算机专业必看的几部电影 计算机专业必看的几部电影&#xff0c;就像一场精彩的编程盛宴&#xff01;《黑客帝国》让你穿越虚拟世界&#xff0c;感受高科技的魅力&#xff1b;《社交网络》揭示了互联网巨头的创业之路&#xff0c;《源代码》带你穿越时间解救世界&#xff0c;…

LeetCode每日一题589. N-ary Tree Preorder Traversal

文章目录 一、题目二、题解 一、题目 Given the root of an n-ary tree, return the preorder traversal of its nodes’ values. Nary-Tree input serialization is represented in their level order traversal. Each group of children is separated by the null value (S…

【Git】基本概念和使用方式

Git是一个分布式版本控制系统&#xff0c;用于管理和跟踪计算机文件的变化。它最初是由Linus Torvalds开发的&#xff0c;用于管理Linux内核的开发。 Git的基本概念包括&#xff1a; 仓库&#xff08;Repository&#xff09;&#xff1a;一个仓库是Git中存储项目文件和历史变更…

webdriver.Remotegrid

在其他主机上运行webdriver,可用于分布式执行环境 1.下载和Chrome版本对应的webdriver,将其添加到PATH环境变量中 Linux下:export PATH=$PATH:Library/Drivers >> ~/.bash_profile source ~/.bash_profileMac下: Mac 下的source xxx只会生效一次(从 macOS Catalina …

如何结合《ISO 55001资产管理-管理系统要求》,提升资产管理绩效

在当今竞争激烈的商业环境中&#xff0c;有效的资产管理对于组织的成功至关重要。ISO 55001标准为组织提供了一个框架&#xff0c;帮助其建立和维护一个高效的资产管理系统&#xff0c;从而实现更好地管理资产并提升业绩的目标。本文将探讨如何结合ISO 55001标准&#xff0c;以…

猫多喝水好吗?可以促进猫咪多喝水的主食分享

猫咪多喝水确实是有益的。适量的饮水对于猫咪的健康至关重要&#xff0c;有助于维持体液平衡、促进消化、减少便秘的风险&#xff0c;并对泌尿系统的健康起到保护作用。正常情况下&#xff0c;建议每公斤体重的猫每天摄入60-80毫升的水&#xff0c;除了与体重相关外&#xff0c…

python使用工厂模式和策略模式实现读文件、分析内容功能

当涉及到在 Python 中创建类以及使用设计模式来实现读取文件和分析内容的功能时&#xff0c;我们可以考虑使用工厂模式和策略模式的结合。下面是一个简单的示例&#xff0c;演示如何通过创建类和使用设计模式来实现这一功能&#xff1a; # 工厂模式&#xff1a;根据不同的分析…

使用chatgpt写VBA程序操作EXCEL

在chatgpt输入&#xff0c;我有个EXCEL&#xff0c;它有4列&#xff0c;第一列是序号&#xff0c;第二列是机号&#xff0c;第三列是日期&#xff0c;第四列是能耗。同一机号会对应多个日期和多个该日期的能耗。我想让同一个机号的数据下新增加一行&#xff0c;在这一行内算出该…

基于51单片机--智能指纹识别密码锁设计(软件准备)

一.系统介绍 本次分享的是一款基于51单片机的智能指纹识别密码锁设计&#xff0c;该系统以STC89C52单片机作为模块核心&#xff0c;通过串口通信控制指纹模块AS608实现录取指纹并存储指纹数据&#xff0c;并通过LCD12864液晶显示屏比对流程及效果&#xff0c;采用4X4矩阵键盘完…