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 Backgrounds属性相关介绍
May 11 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 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/05/30 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php数据库备份还原类分享
2014/03/20 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
python判断windows隐藏文件的方法
2014/03/21 Python
python自动翻译实现方法
2016/05/28 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
解决Python使用列表副本的问题
2019/12/19 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
售前工程师职业生涯规划
2014/03/02 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
java项目构建Gradle的使用教程
2022/03/24 Java/Android