net调整div位置其实很简单。这事复杂在很多人对CSS定位属性理解不够。先说最重要的,你可以通过设置div的position属性为absolute或relative来调整位置。
1. 用absolute定位,可以让div脱离文档流,根据包含块的边框定位。去年我们做的一个响应式网页,大概3000量级,就是用这个方法让div悬浮在页面顶部,不受其他元素影响。
2. 另外一点,relative定位则是在原来的位置偏移。比如,你可以在top和left属性中指定偏移量。有个细节挺关键的,如果你设置了position: relative;,但没指定top和left,div不会动。
我一开始也以为absolute和relative一样,后来发现不对,absolute定位的div不会影响其他元素的布局,而relative定位的div则会影响其子元素的布局。
等等,还有个事,记得在设置position属性时,别忘了设置z-index,这可以控制div的堆叠顺序。如果你不设置,div会按照HTML的顺序堆叠。
所以,想要调整div位置,关键在于选择合适的定位方法和设置相应的偏移量。这个点很多人没注意,但我觉得值得试试。
使用CSS的position属性。例如,将position设置为absolute后,可以通过top和left属性来定位div。
css div { position: absolute; top: 50px; left: 100px; }
这就是坑,别用static定位div,它不会按预期工作。
使用CSS定位。
这就是坑: position: relative;后设置top和left。
别信: 使用margin调整位置。
别这么干: 直接使用top和left,而非margin。
实操提醒: 先给父元素设置position: relative;。