Posicionamento CSS (CSS-P) do DHTML

O CSS é usado para adicionar estilos aos elementos HTML.

Exemplo

Note:A maioria dos exemplos de DHTML requer IE 4.0+、Netscape 7+ ou Opera 7+!

position:relative
Como posicionar este elemento relativamente à sua posição normal.
position:relative
Como posicionar todos os títulos relativamente à sua posição normal.
position:absolute
Como definir um elemento usando um valor absoluto.

Você pode encontrar mais exemplos na parte inferior da página.

Quais atributos podem ser usados juntamente com o CSS-P?

Primeiro, o elemento deve especificar a propriedade 'position' (relative ou absolute).

Então, posso configurar os seguintes atributos CSS-P:

  • left - posição lateral esquerda do elemento
  • top - posição superior do elemento
  • visibility - especificar se o elemento deve ser visível ou oculto
  • z-index - ordem de empilhamento do elemento
  • clip - recorte do elemento
  • overflow - como lidar com o conteúdo excedente

Position

A propriedade 'position' do CSS permite que você controle a posição de um elemento no documento.

position:relative

A propriedade 'position: relative' permite posicionar um elemento com base na posição atual do elemento.

O exemplo a seguir posiciona o elemento div à direita da sua posição normal em 10 pixels:

div
{
position:relative;
left:10;
}

position:absolute

A propriedade 'position: absolute' posiciona um elemento com base na margem do contorno da janela.

O exemplo a seguir posiciona o elemento div à direita da margem lateral direita do bloco contendo 10 pixels:

div
{
position:absolute;
left:10;
}

Visibilidade

A propriedade 'visibility' determina se um elemento deve ser visível ou invisível.

visibility:visible

A propriedade 'visibility: visible' faz com que o elemento seja visível.

h1
{
visibility:visible;
}

visibility:hidden

A propriedade 'visibility: hidden' faz com que o elemento seja invisível.

h1
{
visibility:hidden;
}

Z-index

A propriedade 'z-index' é usada para posicionar um elemento após outro. O valor padrão de 'z-index' é 0. Quanto maior o valor, maior é a prioridade. 'z-index: -1' representa uma prioridade mais baixa.

h1
{
z-index:1;
}
h2
{
z-index:2;
}

No exemplo acima, se h1 e h2 se sobrepondo, o elemento h2 ficará acima do h1.

Filtros

A propriedade 'filter' permite que você adicione mais efeitos de estilo a texto e imagens.

h1
{
width:100%;
filter:glow;
}

Note:If you need to use the filter attribute, always specify the width of the element.

The above example produces the following output:

Header

different filters

Note:unless the background-color attribute is set to transparent, some Filter attributes will not work!

attribute parameter description example
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 allow you to set the opacity of the element 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
 blur elements 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color make the specified color transparent 
filter:chroma(
color=#ff0000)
fliph none invert elements horizontally filter:fliph;
flipv none invert elements vertically filter:flipv;
glow
  • color
  • strength
 make elements glow 
filter:glow(
color=#ff0000,
strength=5);
gray none represent elements in black and white filter:gray;
invert none represent elements with inverted color and brightness values filter:invert;
mask color represent elements with specified background color and transparent foreground color 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 represent elements with shadow 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 represent elements with shadow 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 represent elements as wavy 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Exiba elementos com valores de cor invertida e brilho usando preto e branco. filter:xray;

Fundo

A propriedade background permite que você escolha seu próprio fundo.

background-attachment:scroll

O fundo se move com a rolagem da página.

background-attachment:fixed

O fundo não se move com a rolagem da página.

Mais Exemplos

Visibilidade
Como tornar um elemento invisível. Você deseja que este elemento seja exibido ou não?
Z-index
O Z-index pode ser usado para posicionar um elemento após outro, usando a ordem Z-index.
Z-index
Veja, a ordem Z-index do elemento foi alterada.
Cursors
Mude o estilo do cursor usando CSS.
Filtros
Use a propriedade filter para alterar o estilo do título.
Filtros em Imagens
A propriedade filter também pode ser aplicada a imagens, aqui estão alguns exemplos de imagens com a propriedade filter aplicada.
Watermark
Imagem de fundo que não se move quando a página rola.