Position
AO atributo position é retratado de uma maneira bem natural e intuitiva pelo WPF. Para atribuir classes utilitárias de posição no seu código, basta escrever o nome do valor do atributo diretamente como uma classe css:
hidden<div éclass="relative">
utilizada<!-- O conteúdo dessa classe recebeu o atributo css 'position: relative' -->
</div>
<div class="absolute">
<!-- O conteúdo dessa classe recebeu o atributo css 'position: absolute' -->
</div>
<div class="sticky">
<!-- O conteúdo dessa classe recebeu o atributo css 'position: sticky' -->
</div>
<!-- Isso funciona para ocultarqualquer umoutro elementotipo nade página.atribuição Elade aplicaposicionamento. a-->
propriedadeAbaixo display:segue none!important;,uma que fazlista com quetodas as posições suportadas pelo framework:
| Classe Utilitária |
Comportamento |
static |
Posicionamento padrão, segue o fluxo normal do documento.
|
sticky |
Alterna entre relative e fixed, fixando o elemento ao atingir um ponto de rolagem definido.
|
relative |
Posicionado relativo à sua posição original. Permite ajustes com top, right, bottom e left.
|
absolute |
Posicionado em relação ao ancestral mais próximo com posição não sejastatic, exibidosai nodo layoutfluxo danormal. |
página,
mesmo
quefixed |
ele
aindaPosicionado existaem no código HTML. O !important garante que essa regra de estilo tenha prioridade sobre outras regras de estilo que possam estar definidas para relação mesmo elemento.
Você também pode decidir exibir/esconder elementos baseado no tamanho geral da suaà janela de trabalho, ou tamanho do dispositivo.navegador, permanece Afixo classe desktop exibirá o conteúdo em resoluções acima de 1024px enquantodurante a classe mobile só renderizará o conteúdo em dispositivos com resoluções até 1024px.rolagem.
Esse
|
código
SCSS
fornece uma maneira simples e eficaz de ocultar elementos em diferentes contextos de layout, seja de forma geral ou especificamente em dispositivos móveis.