css position fixed 左右双定位的实现代码


Posted in HTML / CSS onApril 29, 2021

CSS Position(定位)
position 属性指定了元素的定位类型。

position 属性的五个值:

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 1400px;
				height: 1500px;
				margin: 0 auto;
			}
			.box1{
				border: 1px solid #000000;
				height: 200px;
				width: 200px;
			    display: inline-block;
				position: fixed;
		
			}
			.box02{
				    border: 1px solid #006400;
				    height: 1500px;
				    width: 800px;
				    display: inline-block;
				    margin: 0 20px;
				    margin-left: 250px;
			}
			.box03{
				border: 1px solid #006400;
				height: 200px;
				width: 200px;
				display: inline-block;
			    position: fixed;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">123</div>
			<div class="box02">456</div>
			<div class="box03">789</div>
		</div>
	</body>
</html>

css position fixed 左右双定位的实现代码

到此这篇关于css position fixed 左右双定位的实现代码的文章就介绍到这了,更多相关css position fixed定位内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
CSS3实现的侧滑菜单
CSS完成视差滚动效果
Html5通过数据流方式播放视频的实现
Apr 27 #HTML / CSS
CSS3实现的3D隧道效果
用CSS3画一个爱心
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 #HTML / CSS
You might like
Terran剧情介绍
2020/03/14 星际争霸
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
解析PHP提交后跳转
2013/06/23 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
Javascript confirm多种使用方法解析
2020/09/25 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
2014道德模范事迹材料
2014/02/16 职场文书
期末评语大全
2014/05/04 职场文书
产品推广策划方案
2014/05/10 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
Consul在linux环境的集群部署
2022/04/08 Servers