1、首先我不给div定位来看看两个div在浏览器中是如何显示的,具体的代码如下:
如下图,可以看到两个div在没使用定位的情况下显示的位置,我们可以发现div是个块,自动换行了。
2、相对定位:首先给div2使用相对定位,用position:relative来实现的,具体的代码如下:
可以看到如下图,div2的位置离div1的位置偏移了上边四十个像素,左边四十个像素。
3、绝对定位:现在来看看绝对定位,使得div1和div2能重叠,具体的代码如下:
如下图是不是发现两个div块重叠了,具体的效果如下图。
4、绝对定位:现在我来使得div1的绝对定位边60px,左边60px,看看执行的效果是什么样子呢?具体的代码如下:
可以看到如下图的执行效果,是不是得出了绝对定位的定位点是浏览器左上角坐标点为(0,0)这个像素点为起点的。
5、div块加文字P:这里为了说明下个定位相关的知识,我先做如下的模型,具体的代码如下:
如下图可以看到文字在div块中,那么我们该如何使得div中文字总是在div块中呢,这里说的是使用绝对定位的情况下。
6、div和文字:将div块设置成绝对定位,看看文字显示的位置,具体的代码如下:
如下图,是不是发现文字没有在div块中了。
7、div绝对定位下块中的文字:这里我要实现div在绝对定定位下,div以及能在块中,具体的代码如下:
上面相对,下面绝对,具体的显示效果如下图。
CSS实现div垂直居中的方法有很多,下面div居中的几种方法是自己平时写网页中经常用到的,最常见的例子就是登录注册弹出框。
方法一:对div使用绝对布局position:absolute并设置top,left,right,bottom的值相等,但不一定都等于0;并且设置margin:auto。
方法二:这个方法要知道div的宽度和高度。对div使用绝对布局position:absolute并把top和left的值都设置为50%;50%就是指页面窗口的宽度和高度的50%;最后将div左移和上移,左移和上移的大小为div宽度和高度的一半。
其中 margin-left:-100px 和 margin-top:-100px 可以写成 margin:-100px 0px 0px -100px
方法三:div使用绝对定位position:absolute,并且设置left和top的值都为50%。使用css3的transform属性。transform:translate(-50%,-50%)。
以上3种方法的效果如下显示
若有两个div,里面小的div相对于外面大的div水平垂直居中对齐,有以下几种方法。
方法一:利用position和margin:auto实现。父元素设置position:relative;子元素设置position:absolute,并设置top,left,right,bottom值相等。
方法二:使用position。父元素设置position:relative;子元素设置position:absolute。并设置top和left为50%,并设置左移和上移为子元素的大小的一半。
方法三:使用display:flex。这种方法需要设置浏览器的兼容性。
方法四:使用transform:translate()。父元素设置position:relative;子元素设置position:absolute。并设置top和left为50%。最后设置transform:translate(-50%,-50%)。
以上四种方法的效果图如下显示
今天就跟大家分享这么多~如果你有更好的方法,请在下方留言
有几个方法:一种:
div1设置为position:relative,
div2设置为position:absolute,
此时的div2就相对于div1进行基准定位了。。。
因为绝对定位position:absolute,不在标准流中,所以内联元素不知到他的位置,会跑到他的下面去。。。这里就看你需要什么样式了,如果简单的可以用padding和margin配合完成,让内联元素出来。。但屏幕缩小放大就变形了。。
二种,
就是你改写一下你的HTML
<div
id="div1">
<div
id="div2"></div>
</div>
把div2放到div1里面,里面设置为float,再position:relative进行浮动后地位,
这种方法比第一种好,这里看你的需求了///