关于absolute定位

先上图吧。

as you see

这是一个购物车的表单,有商品的各种信息。让我们观察红色方框圈起来的部分,第一行只有一个价格$117,第二行除了这个价格,还有个原价(划掉的部分)$130。

整个表是一个<table>,价格部分在<td>中。关键是样式,$117那一部分文字总是在一行的中间,与本行的其他文字在一条水平线上,这一部分的位置不受到$130的影响。

想一下,如果是你,你会怎么做了?

这个问题denka也是愚钝,开始犯了个错误,样式跟前面的什么日期,折扣之类的文字一样,具体是这样的:

td{

padding:15px 5px;

}

很明显,US文字那两行总体来说是垂直居中的,达不到要的效果,于是我改成了这样:

将两行用个div套起来,div的样式是这样的:

{

position: absolute;

top: 16px;

}

因为<td>里面的内容改为了absolute,宽度就塌陷了,成了这样。。

无奈,这得找到Price的<th>,给它加个类名,写了个最小宽度{min-width:101px},把宽度撑起来。

就成了上面你看到的样子。

这让denka突然想(fa)起(xian)使用了absolute的元素会影响到上下的其他元素,像这个例子中就影响到了父元素<td>的宽度,使得宽度崩了。

后来在地铁上,denka灵关一闪,脑袋一拍发现这个东西不是这么做的,有个更好的办法:

将$117和原来左右两边的元素一样,不改他的样式,而将原价$130设定为absolute,再重新定位一下。

这样的好处是,不管有没有下面原价这一行,现价117都能正常处于<td>的中间,因为原价是absolute啊,和现价不在同一层,现价117又可以和旁边的小伙伴一样愉快地玩耍了。。因为原价130只是基于<td>定位,不影响别人。。。

看了这篇不知道小伙伴们有什么启发没有。。。这是我第一篇技术文(瞎扯淡),好羞射。。

关于absolute定位,布布扣,bubuko.com

时间: 2024-11-09 18:02:45

关于absolute定位的相关文章

fixed定位与absolute定位

相同点: 1.fixed定位和absolute定位都是绝对定位 2.fixed定位和absolute定位都脱离了标准文档流, 3.未设置偏移量时,都定位在父元素的左上角 tip:元素设置相对定位或绝对后,就具有了偏移属性和堆叠属性Z-index,属性值越大,越靠上 不同点: fixed定位: 设置偏移量后:无论有无已经定位的祖先元素,都相对于浏览器窗口进行偏移 未设置偏移量:以其父元素为基准定位,会继续包含在父包含块中. 表现形式:位置固定,不会随滚动条变化:被他遮盖的元素,可以从其下穿过. a

Css fixed和absolute定位差别

fixed:固定定位 absolute:绝对定位 差别非常easy: 1.没有滚动栏的情况下没有差异 2.在有滚动栏的情况下.fixed定位不会随滚动栏移动而移动.而absolute则会随滚动栏移动 能够这么理解.fixed:固定在当前window不动, absolute:会随參照对象元素的高度和宽度变化而变化 一般fixed用在遮盖层和固定在页面某个位置,如固定在顶端的菜单条,又如弹出提示框居中显示 以下样例但是简单測试两者之间的差别,注意拖动滚动栏看差异 <!DOCTYPE html> &

fixed 和 absolute 定位的区别

fixed:固定定位           absolute:绝对定位 在没有滚动条的情况下两者其实没有差异.但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高变化为移动. 一般fixed用在遮盖层和固定在页面某个位置(固定在顶端的菜单栏 / 弹出框居中显示 / 页面两侧的广告位等). 在遮罩中最好使用fixed代替absolute,这样即使在敦东的时候,也能始终让遮罩盖住整个窗口!!! 测试代码,拖动滚动条看差异 <style> body { heig

Css fixed和absolute定位区别

fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 可以这么理解,fixed:固定在当前window不动, absolute:会随参照对象元素的高度和宽度变化而变化 一般fixed用在遮盖层和固定在页面某个位置,如固定在顶端的菜单栏,又如弹出提示框居中显示 下面例子可是简单测试两者之间的区别,注意拖动滚动条看差异 <!DOCTYPE html> <

fixed和absolute定位区别

ixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 可以这么理解,fixed:固定在当前window不动, absolute:会随参照对象元素的高度和宽度变化而变化 一般fixed用在遮盖层和固定在页面某个位置,如固定在顶端的菜单栏,又如弹出提示框居中显示 下面例子可是简单测试两者之间的区别,注意拖动滚动条看差异 <!DOCTYPE html><ht

position:relative/static/fixed/absolute定位的区别以及使用场景

absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变.absolute的元素不仅位置改变了,同时也脱离了文档流.所以absolute会把非定位盒子覆盖掉. position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子

CSS 浅析position:relative/absolute定位方式

一.position:relative 相对定位 分两种情况分析:· 无 position: relative:· 有 position: relative. 代码如下图: 显示效果如下图:  我们给 box4加入 position: relative属性.  * 如果元素加上 position: relative 属性; 元素默认为 块级元素.  * 如果未给出TRBL(top, right, bottom, left), 元素位置不变, 样式不变.  * 给出 TRBL时,是相对于 之前的位

关于移动端的文本框获取焦点时导致fixed或absolute定位的按钮被手机键盘顶上去的问题

var win_h = $(window).height();//关键代码 window.addEventListener('resize', function () { if($(window).height() < win_h){ $('#footer').hide(); }else{ $('#footer').show(); } }); 原文地址:https://www.cnblogs.com/mmy67/p/10310734.html

移动端的文本框获取焦点时导致fixed或absolute定位的按钮被手机键盘顶上去的问题

var win_h = $(window).height();//关键代码 window.addEventListener('resize', function () { if($(window).height() < win_h){ $('.share-btn-box').hide(); }else{ $('.share-btn-box').show(); } }); 原文地址:https://www.cnblogs.com/ivan5277/p/11247314.html