如何让div 显示div在另一个div上面面

来源：蜘蛛抓取(WebSpider) 时间：2016-03-04 09:13 标签： js点击显示另一个div
在文本内输入字，在另一个div（span）中同步出现，怎么实现 - HTML/CSS当前位置:& &&&在文本内输入字，在另一个div（span）中同步出现，在文本内输入字，在另一个div（span）中同步出现，怎么实现&&网友分享于：&&浏览：20次在文本内输入字，在另一个div（span）中同步出现，如何实现？如题，最好有实例，谢谢了。------解决方案--------------------HTML code
&!DOCTYPE HTML&
&meta charset=&gb2312& /&
&title&&/title&
body {font-size:12}
&input id=&text& /&
&div id=&div&&&/div&
function $(el){
return typeof el == 'string' ? document.getElementById(el) :
$('text').onkeyup = function(){
$('div').innerHTML = this.
------解决方案--------------------HTML code
&input id='i'/&
&div id='d' style='width:300 height:50 border:1px solid #ccc'&&/div&
var ipt = document.getElementById('i');
var div = document.getElementById('d');
ipt.onkeyup = function()
div.innerHTML = this.value
------解决方案--------------------&input type=&text& onkeyup=&toSpan(this);& /&&span id=&span1&&&/span&&script type=&text/javascript&& function toSpan(obj) {
document.getElementById('span1').innerHTML = obj. }&/script&
------解决方案--------------------HTML code
&!DOCTYPE HTML&
&meta charset=&gb2312& /&
&title&&/title&
body {font-size:12}
&input id=&text& /&
&div id=&div&&&/div&
function $(el){
return typeof el == 'string' ? document.getElementById(el) :
$('text').onkeyup = function(){
if( this.value.length & 6 ){
$('div').innerHTML =
this.value.substring(0,6) + '...';
$('div').innerHTML = this.
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有访问本页面，您的浏览器需要支持JavaScript妙用z-index让一个div显示在最前面
作者：佚名
字体：[ ] 来源：互联网 时间：09-11 17:06:10
css 的position定位在有重叠的时候，z-index越大就显示在最上面，现在大家应该知道了吧，感兴趣各位可以参考下
position定位如果有重叠的时候，z-index愈大，就显示在最上面此时我们就可以设置div的css样式z-index:99999,那么该div就显示在最前面
大家感兴趣的内容
12345678910
最近更新的内容css的div垂直居中的方法，百分比div垂直居中
34070次浏览
我们都知道，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如何垂直居中呢？我们在网页布局，特别是手机等web端网页经常是不固定高宽的div，那么这些div如何垂直居中呢？这篇文章，我总结一下。
固定高宽div垂直居中
如上图，固定高宽的很简单，写法如下：
left: 50%;
height:100
margin-left:-100
margin-top:-50
不固定高宽div垂直居中的方法
用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。
html如下：
&div class=&block& style=&height: 300&&
&div class=&centered&&
&h1&haorooms案例题目&/h1&
&p&haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容&/p&
/* This parent can be any width and height */
text-align:
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-
height: 100%;
vertical-align:
margin-right: -0.25 /* Adjusts for spacing */
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-
vertical-align:
width: 50%;
可以用table布局方法，但是这种方法也有局限性！
写法如下：
&table style=&width: 100%;&&
&td style=&text-align: vertical-align:&&
Unknown stuff to be centered.
由于table写法比较费时，你也可以用div代替table,写法如下：
&div class=&something-semantic&&
&div class=&something-else-semantic&&
Unknown stuff to be centered.
.something-semantic {
width: 100%;
.something-else-semantic {
display: table-
text-align:
vertical-align:
方法三，终极解决方法：
以上2中方法可能都有其局限性，我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法！但是方法是css3的写法，想兼容IE8的童鞋们，建议用上面的方法！
方法和我们固定高宽的差不多，但是不用margin我们用的是 translate()
demo如下：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml& xml:lang=&en&&
&meta http-equiv=&Content-Type& content=&text/charset=UTF-8&&
&title&haorooms不固定高度div写法&/title&
left: 50%;
background-color: #000;
width:50%;
height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
&div class=&center&&&/div&
我上面的css只是针对webkit内核的浏览器，其他内核浏览器写法如下：
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
关于每个浏览器的写法，可以看看我之前的一篇文章：
有些弹出层的样式，也可以用这个方法居中
left: 50%;
width: 50%;
max-width: 630
min-width: 320
z-index: 2000;
visibility:
-webkit-backface-visibility:
-moz-backface-visibility:
backface-visibility:
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
css3不定宽高水平垂直居中
只要三句话就可以实现不定宽高水平垂直居中。
justify-content://子元素水平居中
align-items://子元素垂直居中
display:-webkit-
在父级元素上面加上上面3句话，就可以实现子元素水平垂直居中。
相关文章：
关键词搜索

我要回帖

更多关于 js点击显示另一个div 的文章

 

随机推荐