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圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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 win下Socket方式发邮件类
2009/08/21 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
Laravel实现表单提交
2017/05/07 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
Scrapy框架使用的基本知识
2018/10/21 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
夏季奶茶店创业计划书
2014/01/16 职场文书
高中军训感言600字
2014/03/11 职场文书
关爱老人标语
2014/06/21 职场文书
2014年收银工作总结
2014/11/13 职场文书
经理助理岗位职责
2015/02/02 职场文书
初三英语教学反思
2016/02/15 职场文书