How to realize the fixed page positioning effect of simulating position by CSS
This article mainly introduces how CSS simulates the fixed page positioning effect of position. The article is very detailed and has a certain reference value. Interested friends must finish reading it!
The specific implementation methods are as follows:
The code is as follows:
Simulated position:fixed
* {padding:0; margin:0;}
Body {height:100%; overflow:hidden; font-size:14px; line-height:2; position:relative;}
Html {height:100%; overflow:hidden;}
.fixed {position:absolute; top:10px; left:10px; width:200px; height:350px; background:#fc0; border:1px solid # f60;}
.wrapper {height:100%; overflow:auto;}
.body {padding-top:10px; margin-left:232px;}
No matter how much you scroll the window on the left, it won't move.
Display content 1 display content 1 display content 1
Display content 2 display content 2 display content 2
Display content 3 display content 3 display content 3
Display content 4 display content 4 display content 4
Display content 5 display content 5 display content 5
Display content 6 display content 6
Display content 7 display content 7 display content 7
Display content 8 display content 8 display content 8
Display content 9 display content 9 display content
Display content 10 display content 10
Display content 11 display content 11
Display content 12 display content 12
Display content 13 display content 13
Display content 14 display content 14
Display content 15 display content 15
Display content 16 display content 16
Display content 17 display content 17
Display content 18 display content 18
Display content 19
Display content 20 display content 20
Display content 21 display content 21
Display content 22 display content 22
Http://www.yisu.com/
The above is all the content of the article "how to simulate the fixed page positioning effect of position by CSS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
