css怎么调整div的位置

html-css012

css怎么调整div的位置,第1张

可以使用css中的position来对div进行定位来改变div的位置,position可能的值如下:

工具原料:编辑器、浏览器

1、通过设置一个div的position的值来调整div的位置,简单的代码示例如下:

body>

<div id="div2"></div>

<style>

div{

border: 1px solid red

width: 200px

height: 200px

position: absolute

right: 200px

bottom: 200px

}

</style>

</body>

2、设置一个宽高为200像素的div距body的右边200像素底部200像素,运行的效果如下图:

<html>

<head>

<meta charset="utf-8">

<style>

.动1{

position: absolute

left: 30px

top: 200px

}

</style>

<script>

function 移动(){

document.getElementById("块").className="动1"

}

</script>

</head>

<body>

<input type="button" onclick="移动()" value="移动" />

<div id="块">你点移动,看我动不动</div>

</body>

</html>

<!--写的比较粗糙。正常运行无bug。不过需要等待动画完成再点击btn,不然就出bug。希望能帮到你-->

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.box{width:300pxheight: 300pxbackground:rgba(200,200,200,.5)position: absoluteleft: 0top: 50pxdisplay: none}

.show{display: block}

</style>

</head>

<body>

<div class="box"></div>

<button>点击</button>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

//点击触发

$('button').on('click',function(){

//初始化

if($('.box').css('opacity') ==0){

$('.box').removeClass('show').css({'left':'0','opacity':1})

console.log(1)

}

console.log($('.box').css('opacity'))

$(".box").addClass('show').animate({'left':'300px'},2000).delay(1000).animate({'left':'600px','opacity':0},2000)

})

})

</script>

</body>

</html>