css中怎样设置绝对定位为默认隐藏

html-css08

css中怎样设置绝对定位为默认隐藏,第1张

position:absolute 绝对定位吧？

隐藏有几种，比如display:none

还有一种是给绝对定位的上一级设置overflow:hidden

然后绝对定位后，设置top或left或right或bottom任何一个超出父级div尺寸即可

<!-- Html布局：-->

<div class="panel1">

 <div class="inside show">

  <p>规则<br />

     1.点击【开始】......<br />

     2.请在输入框.....<br />

     3.这是系统......

  </p>

 </div>

</div>

<div class="panel2">

 <p>请点击【开始】按钮开始游戏：<input type="button" value="开始" class="start" /></p>

 <p>请在输入框输入您的估计价格：<input type="text" /><input type="button" value="确定" /></p>

</div> /* CSS代码 */

.panel1{

float:left

width:100% /* 或者一个实际的像素，如1000px */

height:100px /* 实际高度，不要auto */

overflow:hidden /* 可选 */

}

.panel1 .inside{overflow:hidden}

.panel2{

float:left

text-align:right

}

.show{display:block}

.hide{display:none} /* 不清楚你是否使用jquery或者其他js库或者纯javascript，这里提供jquery方法 */

$(document).ready(function(e){

 $('.start').click(function(){

  $('.panel1 .inside').addClass('hide')

 })

})

不清楚欢迎追问。