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中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 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
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
Python检测网站链接是否已存在
2016/04/07 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
文艺晚会主持词
2014/03/24 职场文书
2014年药店工作总结
2014/11/20 职场文书
运动会表扬稿
2015/01/16 职场文书
英语演讲开场白
2015/05/29 职场文书
父亲去世追悼词
2015/06/23 职场文书
月考总结与反思
2015/10/22 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android