css如何让元素块根据自身向下,向右同时移动50px?

html-css010

css如何让元素块根据自身向下,向右同时移动50px?,第1张

① 可以使用“相对定位”,position:relative;

② 注意坐标轴的移动方向:

向左移动:当然是正数->left:50px

向下移动:当然是正数->top:50px;

(这样记:既然要向下移动,当然是要远离top顶部了,自然top的属性值要正数

既然要向右移动,就是远离左边了,left属性值自然要为正数!!!)

方案一:

div{margin:50pc 0 0 50pc}

方案二:

div{

position: relative

top: 50pc

left: 50pc

}

方案三:

div{

transform: translate(50pc,50pc)

}

<HTML>

<HEAD>

<TITLE>测试表格内的滚动条</TITLE>

</HEAD>

<BODY>

<table>

<tr>

<td>表格内的滚动条:</td>

<td>

<div id="wins"

style="position:absoluteheight:200width:200overflow:autobackground:#EEEEEE">

<p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p>

<p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

</div>

</td>

</tr>

<tr>

<td colspan="2" align="right">

<span onmouseover='scrollb=setInterval("wins.scrollLeft-=10",100)'

onmouseout=clearInterval(scrollb)>向左</span>

<span onmouseover='scrollb=setInterval("wins.scrollTop-=10",100)'

onmouseout=clearInterval(scrollb)>向上</span>

<span onmouseover='scrollb=setInterval("wins.scrollLeft+=10",100)'

onmouseout=clearInterval(scrollb)>向右</span>

<span onmouseover='scrollb=setInterval("wins.scrollTop+=10",100)'

onmouseout=clearInterval(scrollb)>向下</span>

</td>

</tr>

</table>

</BODY>

</HTML>