Fixed: Represents a pinned position, similar to the absolute anchor type, but its relative movement coordinates are the view ( the page window within the screen ) itself.
Because the view itself is fixed, it does not change with the scroll bars of the browser window, unless you move the screen position of the browser window on the screen, or change the display size of the browser window,
As a result, fixed-positioned elements are always located somewhere in the view in the browser window and are not affected by the flow of the document, which is the same as the Background-attachment:fixed properties feature.
The following code enables you to move the 100px to the right relative to the browser view and move the 50px down. And the position is fixed when you drag the scroll bar.
<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><title>Relative style</title><styletype= "Text/css">#div1{width:200px;Height:200px;Border:2px Red Solid;position:fixed; Left:100px;Top:50px;}</style></Head><Body> <DivID= "Div1"></Div> <P>text, text, text, textual, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text text text text.</P> <P>text, text, text, textual, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text text text text.</P> <P>text, text, text, textual, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text text text text.</P> <P>text, text, text, textual, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text text text text.</P> <P>text, text, text, textual, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text text text text.</P> <P>text, text, text, textual, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text text text text.</P> <P>text, text, text, textual, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text text text text.</P>
Effect:
Layer model-Fixed positioning (position:fixed)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
