CSS绝对定位：向右偏移15%+22px应该怎样写？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS绝对定位：向右偏移15%+22px应该怎样写？相关的知识，希望对你有一定的参考价值。
CSS是能实现的，不过有点麻烦。大概是这么实现：
在html中为需要“向右偏移15%+22px”的div加上两个辅助定位的div：
<div id="theMiddel">
<div id="div"></div> <!-- 目的：此div向偏移15%+22px -->
</div>
</div>
2. 在CSS中，首先使最外层的<div id="outer">使用相对定位position:relative，占据15%的父元素的宽度(即width: 15%)，高度与目标<div id="div">一样；
3. 在CSS中，使以下两个div
<div id="theMiddel"><div id="div"></div> <!-- 目的：此div向偏移15%+22px -->
</div>
假设目标<div id="div">的宽度是50px。
<div id="theMiddel">使用绝对定位，定位到最上边最右边，这时候目标<div id="div">的位置就是：向右偏移15%减去目标<div id="div">的宽度（15% - 50xp）。
4. 目标<div id="div">使用绝对定位，然后right: -（50 + 22）px。这就是向右偏移15%+22px。
以下代码详细实现
向右偏移15%+22px.html 文件代码清单如下：
<!doctype html><html langj="zh">
<head>
<meta charset="utf-8">
<title>向右偏移15%+22px</title>
<link rel="stylesheet" href="marginRight.css">
</head>
<body>
<p>CSS绝对定位：向右偏移15%+22px</p>
<div id="outer">
<div id="theMiddel">
<div id="div"></div>
</div>
</div>
</body>
</html>
marginRight.css 文件代码清单如下：
position: relative;
width: 15%; /* 用宽度15%定位到15%位置 */
height: 50px; /* 这行可以去掉，现在是为了看清偏移情况 */
background: rgb(220, 220, 220);/* 这行可以去掉，现在是为了看清偏移情况 */
#theMiddel /* 中间部分使目标div移动到15%位置的最右边 */
position: absolute;
top: 0;
right: 0;
#div
position: absolute;
right: -72px;
/* 偏移量是：目标div的宽度加上22px。如果目标div宽度变化，这行自己相应变化 */
width: 50px;
/* 目标div的宽度，自己设定，如果变化，上一行的负偏移量也要改变 */
height: 50px;
background: rgb(18, 48, 168);
参考技术A
CSS中只能使用百分比和px中的一种，用js可以实现。
<style type="text/css">*margin:0;padding:0;
.div1width:800px;height:100px;border:1px solid #000;margin:50px auto;
.div2width:200px;height:80px;border:1px solid #F00;position:relative;
</style>
<script type="text/javascript" src="js/jq.js"></script><!--这里引入jQuery库-->
<script type="text/javascript">
$(function()
var ParDivWidth=$(".div1").width();//得到上一级div1的宽度
var DivWidth=ParDivWidth*0.15+22+'px';//计算出偏移值
$(".div2").css(left:DivWidth)//把偏移值给div2
);
</script>
<div class="div1">
<div class="div2"></div>
</div> 参考技术B
这个只需要在left：15%的基础上，再加一个margin-left：22px就行，类似代码如下：
这段代码是为了实现居中效果
你可以直接用百分比,也可以用px, 尽量在布局的时候固定好位置,
用px定位就好了最方便了追问
就是在15%的基础上再向右平移22个像素。这样的CSS不能实现么？
追答你为什么要这样的定位呢,如果你的页面是以百分比的,那就直接用百分比来定位,用像素就直接用像素来定位吧
参考技术D 没有这种写法，你可以写成15.5%或者具体到多少像素。ps：你是奇葩啊追问
就是在15%的基础上再向右平移22个像素。这样的CSS不能实现么？
追答那你先15%，然后加个。maigin—right:22px
追问不可以啊。。
17 css定位
css定位
定位是用来移动元素位置的。
相对位置，参考元素原始位置，偏移某个距离
绝对位置，参考点是最近的有定位的祖先元素，偏移某个距离
定位
1 css定位 相对定位 绝对定位 固定定位
为什么
移动元素
设置元素在包含块中出现的位置，以及遮盖
2 相对定位
position: relative;
参考自己原来的位置，偏移某个距离
* 用途
1 做一些位置微调
2 配合绝对定位使用
* 相对定位的元素不脱标，它原本所占的空间仍保留
top 正数向下 可以理解为：距离原来位置顶边框，距离是100个像素
left 正数向右 距离原来位置左边框，距离是100个像素
right 正数向左 距离原来位置右边框，距离是100个像素
bottom 正数向上 距离原来位置底边框，距离是100个像素
任意组合 从top、bottom选一个 left、right选一个
3 绝对定位
position: absolute
* 绝对定位元素脱离标准文档流
脱标的意思：元素框不在文档流中，与文档流无关了，不占用文档流的空间
* 定位参考点
相对于其包含块：绝对定位的元素，他的参考点相是最近的有定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块
c 祖先盒子做参考点
子绝父相最常见的定位手段
最近的有定位的祖先元素：最近的、（无论何种定位 相对可以 绝对也可以 固定定位都可以）、祖先元素做参考
* 绝对定位的元素居中
margin: 0 auto; 不管用 原因适合标准流中有宽度的块元素
只能用margin-left，margin-right
* 应用
90%的压盖效果都是绝对定位做的
4 固定定位
position: fixed;
* 固定定位元素也是脱标
* 参考点： 浏览器的左上角
图片的垂直对齐方式
vertical-align:text-top 跟文本顶部对齐
text-bottom 跟文本底部对齐
z-index属性
1 作用： 负责谁压盖谁
1、 定位的元素能够压住没有定位的（ 默认情况）
2、假如都定位了，html代码后面的盒子压住前面的
div 没有定位
div 绝对定位
div 相对定位
2 使用
* z-index: 数字 数字大的压住数字小的 ,默认值是0,
* z-index只适用于有定位的元素，标准流的元素不能写z-index,浮动的元素也不能写z-index
z-index:-1 可以使定位元素放在标准流元素的后面
* 拼爹现象 见案例
如果父元素都是定位元素，则比较父元素的z-index大小，值大的盖住值小的，
什么是拼爹现象
以上是关于CSS绝对定位：向右偏移15%+22px应该怎样写？的主要内容，如果未能解决你的问题，请参考以下文章