Para passar no quiz, você deve responder corretamente pelo menos 18 das 20 perguntas abaixo.
Qual dos seguintes NÃO é um valor válido para a propriedade position?
fixedabsoluteaboverelative
Qual é o principal propósito da propriedade float no CSS?
Floats são usados para remover um elemento do seu fluxo normal na página e posicioná-lo automaticamente no canto inferior direito da página da web. Floats são usados para remover um elemento do seu fluxo normal na página e posicioná-lo automaticamente no canto superior direito da página da web. Floats são usados para remover um elemento do seu fluxo normal na página e posicioná-lo à esquerda ou à direita do seu contêiner. Floats são usados para remover um elemento do seu fluxo normal na página e posicioná-lo no topo do seu container.
Qual dos seguintes é um exemplo de como fazer um elemento box flutuar para a esquerda?
.box {
float: left-side;
margin-right: 15px;
width: 50px;
height: 50px;
background-color: black;
}.box {
left: float;
margin-right: 15px;
width: 50px;
height: 50px;
background-color: black;
}.box {
float: left;
margin-right: 15px;
width: 50px;
height: 50px;
background-color: black;
}.box {
position: float-left;
margin-right: 15px;
width: 50px;
height: 50px;
background-color: black;
}
Qual é o papel da propriedade clear?
É usado para determinar se um elemento precisa ser fixado no topo da página. É usado para determinar se um elemento precisa ser completamente removido da página. É usado para determinar se um elemento precisa ser movido para baixo do conteúdo flutuante. É usado para determinar se um elemento precisa ser movido para a parte inferior da página.
Qual propriedade CSS é usada para controlar a ordem de empilhamento vertical de elementos posicionados que se sobrepõem na página?
positionz-indexfloatbg-green
Qual das seguintes é a sintaxe correta para posicionamento relativo?
.relative {
position: relative;
top: 30px;
left: 30px;
}.relative {
relative: position;
top: 30px;
left: 30px;
}.relative {
relative-position: relative;
top: 30px;
left: 30px;
}.relative {
position: relative-position;
top: 30px;
left: 30px;
}
Qual propriedade CSS você usaria para fixar um elemento em uma determinada posição na página para que ele não se mova quando a rolagem ocorrer?
position: relative;display: block;position: fixed;position: no-scroll;
O que o posicionamento absoluto faz a um elemento?
O posicionamento absoluto é usado para determinar se um elemento precisa ser movido para baixo do conteúdo flutuante. O posicionamento absoluto é usado para controlar a ordem de empilhamento vertical de elementos posicionados que se sobrepõem na página. O posicionamento absoluto é usado para posicionar o elemento dentro do fluxo normal do documento. O posicionamento absoluto permite que você retire um elemento do fluxo normal do documento, fazendo com que ele se comporte de forma independente dos outros elementos.
Qual das seguintes NÃO é uma propriedade válida que você pode usar para posicionamento absoluto?
rightbottomsidetop
Qual é a principal diferença entre posicionamento relativo e absoluto?
O posicionamento relativo define o elemento em uma posição fixa enquanto o posicionamento absoluto tira um elemento do fluxo normal do documento. O posicionamento relativo posiciona o elemento dentro do fluxo normal do documento enquanto o posicionamento absoluto retira um elemento do fluxo normal do documento. O posicionamento absoluto define o elemento em uma posição fixa enquanto o posicionamento relativo tira um elemento do fluxo normal do documento. O posicionamento absoluto posiciona o elemento dentro do fluxo normal do documento enquanto o posicionamento relativo tira um elemento do fluxo normal do documento.
Qual dos seguintes é um exemplo de posicionar uma caixa no canto superior esquerdo da página?
.box {
position: absolute;
top: 0;
right: 0;
background-color: coral;
width: 50px;
height: 50px;
}.box {
position: absolute;
top: 0;
left: 0;
background-color: coral;
width: 50px;
height: 50px;
}.box {
position: absolute;
bottom: 0;
left: 0;
background-color: coral;
width: 50px;
height: 50px;
}.box {
position: absolute;
bottom: 0;
right: 0;
background-color: coral;
width: 50px;
height: 50px;
}
Qual método de posicionamento permite que um elemento fique fixo em uma posição definida somente quando você rola além de um determinado ponto?
Posicionamento sticky. Posicionamento fixo. Posicionamento absoluto. Posicionamento de float.
Qual dos seguintes é um exemplo correto de uso de posicionamento sticky?
.box {
position: sticky;
top: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: red;
}.box {
position: sticky-fixed;
top: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: red;
}.box {
position: sticky-top;
right: 30px;
width: 50px;
height: 50px;
background-color: red;
}.box {
sticky: position;
top: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: red;
}
Qual é a diferença entre posicionamento sticky e fixed?
Elementos fixos permanecerão na mesma posição na tela enquanto elementos sticky só ficarão fixos até um certo ponto e depois se comportarão como elementos relativos. Elementos fixos serão posicionados em relação à sua posição normal enquanto elementos sticky irão apenas fixar em um determinado ponto e depois se comportarão como elementos relativos. Elementos sticky sempre permanecerão na mesma posição enquanto elementos fixed irão se fixar em um determinado ponto e depois se comportarão como elementos relative. Elementos sticky só podem ser usados em layouts de tabela enquanto elementos fixed podem ser usados em qualquer tipo de layout CSS.
Qual problema o hack clearfix resolveu ao trabalhar com floats?
O hack clearfix ajudou a resolver o problema dos elementos flutuantes que não eram responsivos em layouts para dispositivos móveis e tablets. O hack clearfix ajudou a resolver o problema de sobreposições e colapsos nos layouts quando múltiplos elementos flutuantes eram empilhados lado a lado. O hack clearfix ajudou a resolver o problema dos elementos flutuantes sendo removidos do fluxo normal do documento e sendo posicionados em uma posição fixa na página. O hack clearfix ajudou a resolver o problema dos elementos flutuantes desaparecendo da página.
Qual dos seguintes é um exemplo correto para usar o hack clearfix?
.clearfix::before {
position: fixed;
top: 0;
width: 100%;
clear: both;
}.clearfix::after {
position: relative;
top: 30px;
left: 30px;
clear: all;
}.clearfix::after {
content: "";
display: block;
clear: both;
}.clearfix::before {
top: 30px;
clear: none;
}
O que é posicionamento estático?
Isso permite que você retire um elemento do fluxo normal do documento, fazendo com que ele se comporte de forma independente dos outros elementos. Isso é usado para remover um elemento do seu fluxo normal na página e posicioná-lo automaticamente no canto superior direito da página da web. Este é o fluxo normal para o documento. Os elementos são posicionados de cima para baixo e da esquerda para a direita um após o outro. Isso permite que um elemento fique fixo em uma posição definida somente quando você rolar além de um determinado ponto.
Qual dos seguintes é um exemplo de definir a navbar no topo da página usando posicionamento fixo?
.navbar {
upper: fixed;
width: 100%;
}.navbar {
position: fixed-top;
top: 0;
width: 100%;
}.navbar {
position: fixed;
top: 0;
width: 100%;
}.navbar {
fixed: top;
top: 0;
width: 100%;
}
Qual dos seguintes é um valor válido para usar na propriedade z-index?
12.01upnone
Qual dos seguintes é o valor padrão da propriedade position?
staticinitialinheritrelative
Qual valor de position permite ajustar a posição de um elemento com top e left mantendo-o dentro do fluxo normal do documento?
position: fixed;position: static;position: relative;position: absolute;
Como um elemento com position: sticky; se comporta inicialmente?
Ele se comporta como um elemento fixed até que uma posição de rolagem seja alcançada. Ele se comporta como um elemento relative até que uma posição de rolagem especificada seja atingida. Ele é sempre removido do fluxo normal do documento. Ele se comporta como um elemento absolute dentro do seu pai.
Qual das opções a seguir demonstra um uso válido e eficaz da propriedade z-index para fazer com que .box-two apareça acima de .box-one?
.box-one {
position: absolute;
stack-order: 1;
}
.box-two {
position: absolute;
stack-order: 2;
}.box-one {
float: left;
z-index: 1;
}
.box-two {
float: left;
z-index: 2;
}.box-one {
position: static;
z-index: 2;
}
.box-two {
position: static;
z-index: 1;
}.box-one {
position: absolute;
z-index: 1;
}
.box-two {
position: absolute;
z-index: 2;
}
Para que serve a propriedade z-index no CSS?
Ele controla a ordem de empilhamento vertical dos elementos posicionados que se sobrepõem. Define o nível de zoom da página. Ele controla o alinhamento horizontal dos elementos dentro de um contêiner flexível. Define o espaçamento entre o conteúdo de um elemento e sua borda.
Quando você aplica top: 10%; a um elemento com position: fixed;, em relação a que é calculado o 10%?
A altura da viewport. A altura do próprio elemento. A altura do seu contêiner pai. A largura da viewport.
Qual dos exemplos de código é um uso correto da propriedade z-index para colocar uma sobreposição acima de outro conteúdo?
.overlay {
display: block;
z-layer: 1;
background-color: black;
}.overlay {
position: absolute;
z-index: 10;
background-color: black;
}.overlay {
float: left;
z-index: 2;
background-color: black;
}.overlay {
z-index: 5;
background-color: black;
}
Qual propriedade CSS é usada para controlar se um elemento deve ser movido para baixo dos elementos flutuantes?
displayoverflowclearfloat
Como um elemento com position: relative; e bottom: 25px; será movido?
Ele se moverá 25px para a direita da sua posição normal. Ele se moverá 25px para baixo de sua posição normal. Ele será posicionado a 25px da parte inferior da viewport. Ele se moverá 25px para cima de sua posição normal.
A propriedade z-index afetará apenas elementos que tenham qual propriedade CSS aplicada?
Um conjunto de background-color. Um valor de position diferente de static. Um valor display de inline-block. Um valor float diferente de none.
Qual seria o efeito de aplicar float: right; a um logo em um cabeçalho?
O logo seria removido do seu fluxo normal e colocado no lado direito do seu container, com outro conteúdo envolvendo-o. O logo seria retirado do fluxo e posicionado no lado direito de toda a viewport do navegador, não do seu contêiner. O logo seria alinhado à direita, mas permaneceria no fluxo normal do documento, impedindo que outro conteúdo fizesse wrap. O logo se tornaria um elemento de nível de bloco que ocupa toda a largura do cabeçalho, empurrando outros elementos para baixo.
Qual trecho de CSS manterá um elemento fixo no topo da janela de visualização assim que for rolado até lá?
.header {
position: relative;
top: 0;
}.header {
position: sticky;
top: 0;
}.header {
position: fixed;
top: 0;
}.header {
position: absolute;
top: 0;
}
Qual é o propósito específico de clear: both; no CSS?
Remove quaisquer propriedades clear que foram herdadas de um elemento pai, restaurando o comportamento padrão de flutuação. Ele limpa apenas os elementos flutuantes que estão do lado direito, permitindo que os elementos flutuantes à esquerda permaneçam como estão. Ele garante que o elemento seja movido para baixo de quaisquer elementos flutuantes que apareçam antes dele tanto no lado esquerdo e no lado direito. Ele cancela a propriedade float no próprio elemento, retornando-o ao fluxo normal do documento.
Dado o seguinte código, como
.child será posicionado?
.parent {
/* No position property set */
height: 200px;
}
.child {
position: absolute;
top: 10px;
}
Ele será posicionado a 10px do topo da janela do navegador, permanecendo fixo no lugar mesmo quando o usuário rolar a página. Permanecerá em sua posição estática padrão porque o valor absolute é inválido sem uma propriedade z-index. Ele será posicionado a 10px do topo do bloco de contêiner inicial, como o <body>, porque seu elemento pai não está posicionado. Ele será posicionado a 10px do topo do elemento .parent, pois o posicionamento absolute é sempre relativo ao pai direto.
Qual efeito o seguinte CSS terá no elemento
.box?
.box {
position: absolute;
top: 50px;
left: 50px;
}
O elemento permanecerá em seu fluxo normal, mas será indentado em 50px a partir do topo e da esquerda, afastando outros elementos. O elemento será retirado do fluxo normal e posicionado a 50px do topo e a 50px da esquerda de seu ancestral posicionado mais próximo. O elemento será posicionado em relação ao seu próprio ponto de partida, movendo-se 50px para baixo e 50px para a direita sem sair do fluxo do documento. O elemento ficará fixo na viewport e permanecerá a 50px do topo e a 50px da esquerda, mesmo quando a página for rolada.
Qual dos seguintes valores de position remove um elemento completamente do fluxo normal do documento?
position: relative;position: static;position: absolute;position: inherit;
Dado um elemento .parent e um .child, qual trecho de CSS posicionará corretamente o .child a 20px do canto superior esquerdo do elemento .parent?
.parent {
position: relative;
}
.child {
position: relative;
top: 20px;
left: 20px;
}.parent {
position: relative;
}
.child {
position: absolute;
top: 20px;
left: 20px;
}.parent {
/* position: static; by default */
}
.child {
position: absolute;
top: 20px;
left: 20px;
}.parent {
position: relative;
}
.child {
float: left;
top: 20px;
left: 20px;
}
Qual é a diferença entre o posicionamento static e relative?
Ambos mantêm um elemento no fluxo normal do documento, mas relative permite que o elemento seja deslocado de sua posição original. O posicionamento static é para elementos de nível de bloco, enquanto o posicionamento relative é destinado apenas para elementos inline. O posicionamento static remove um elemento do fluxo do documento, enquanto o posicionamento relative o mantém no fluxo. Um elemento com position: static; pode ser deslocado com as propriedades top e left, enquanto position: relative; não pode.
Qual trecho de CSS posiciona corretamente uma imagem à esquerda, permitindo que outro conteúdo envolva-a?
.image {
display: inline-block;
}.image {
position: absolute;
left: 0;
}.image {
text-align: left;
}.image {
float: left;
}
Qual é a diferença entre posicionamento absolute e fixed?
O posicionamento absolute é relativo ao ancestral posicionado mais próximo, enquanto o posicionamento fixed é relativo à janela de visualização do navegador. O posicionamento absolute mantém o elemento no fluxo normal do documento, enquanto o posicionamento fixed o remove do fluxo. O posicionamento absolute é relativo à viewport, enquanto o posicionamento fixed é relativo ao ancestral posicionado mais próximo. Ambos são posicionados em relação à viewport, mas elementos fixed irão rolar com a página enquanto elementos absolute não irão.
Qual valor de position coloca um elemento no fluxo normal do documento e impede que propriedades de deslocamento como top e left tenham qualquer efeito?
position: fixed;position: absolute;position: static;position: relative;
