css a fixed position for my message

Some times in our webpage developing we need to set a message box or a helping menu in a fixed position in the left or bottom of the page or any other position we want, to do this task we have to build our message or menu then we use a simple css code to assign the fixed position, I will use my web box style with css for example, then I will add some css code to the main message div. 

1
2
3
4
5
6
7

.box_main_div {
    position: fixed; 
    top: 100px;
    left: 200px;
    
.
.
.
}



Another example to illustrate the fixed and relative position:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<!DOCTYPE html>
<html>
<head>
<style>.box_main_div {
    position: fixed; 
    top: 100px;
    left: 200px;
    width: 400px;
    margin:2px;
 
    border: 1px solid #418DC6;
    background-color: #93BEDE;
}
 
.box_related_div{
    position: relative; 
    top: 50px;
    left:20px;
 
    border: 1px solid #418DC6;
    background-color: #FFF4B8;
}</style>
</head>
 
<body>
<br>test line<br>test line<br>test line<br>test line<br>test line<br>test line
<br>test line<br>test line<br>test line<br>test line<br>test line<br>test line
<br>test line<br>test line<br>test line<br>test line<br>test line<br>test line
<br>test line<br>test line<br>test line<br>test line<br>test line<br>test line
<br>test line<br>test line<br>test line<br>test line<br>test line<br>test line
<br>test line<br>test line<br>test line<br>test line<br>test line<br>test line
<br>test line<br>test line<br>test line<br>test line<br>test line<br>test line
 
<div class="box_main_div">
    Main Div message
    <div class="box_related_div">
        Related Div message
    </div>
</div>
<br>test line<br>test line<br>test line<br>test line<br>test line<br>test line
<br>test line<br>test line<br>test line<br>test line<br>test line<br>test line
<br>test line<br>test line<br>test line<br>test line<br>test line<br>test line
<br>test line<br>test line<br>test line<br>test line<br>test line<br>test line
</body>
</html>


The second div message will move to any position starting from the main div position as it related to it.

If this post was good and helpful for you, Please give it Like.
.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )