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属性选择符介绍
Oct 17 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 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
php生成文件
2007/01/15 PHP
实现PHP搜索加分页
2016/10/12 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Python安装selenium包详细过程
2019/07/23 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
python 下载文件的几种方法汇总
2021/01/06 Python
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
考核工作实施方案
2014/03/30 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书